今回は少し技術的な内容です。
例えば何か目立たせたいものがあるときに
バナーや文字などの要素が動いていると目につきやすい!
わざわざjsを使わなくてもCSSのanimationで いい感じに動かすことができます。
要素をふわふわさせたりブルブルさせたりする方法と、
animationについての解説を紹介します。
ふわふわ・ブルブルのデモはこちら
オンマウスでブルブルさせたい場合はこちら
.fuwafuwa {
-webkit-animation:fuwafuwa 3s infinite linear alternate;
animation:fuwafuwa 3s infinite linear alternate;
}
@-webkit-keyframes fuwafuwa {
0% {-webkit-transform:translate(0, 0) rotate(-5deg);}
50% {-webkit-transform:translate(0, -5px) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(5deg);}
}
@keyframes fuwafuwa {
0% {transform:translate(0, 0) rotate(-5deg);}
50% {transform:translate(0, -5px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(5deg);}
}
これで、ふわふわさせたいものに fuwafuwaクラスを付与すればOKです
.buruburu {
-webkit-animation:buruburu 0.1s infinite linear alternate;
animation:buruburu 0.1s infinite linear alternate;
}
@-webkit-keyframes buruburu {
0% {-webkit-transform:translate(0, 0) rotate(-3deg);}
50% {-webkit-transform:translate(0, -1px) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(3deg);}
}
@keyframes buruburu {
0% {transform:translate(0, 0) rotate(-3deg);}
50% {transform:translate(0, -1px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(3deg);}
}
これで、ブルブルさせたいものに buruburuクラスを付与すればOKです
animationの使い方・設定ルールについて少し解説します。
まず、
animation:fuwafuwa 3s infinite linear alternate;
これは省略された書き方です。分解して記述すると
.fuwafuwa {
animation-name:fuwafuwa;
animation-duration:3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-direction:alternate;
}
こうなります
animation-name:fuwafuwa;
→ keyframesの名前です。この場合はfuwafuwaになります。
animation-duration:3s;
→ 一回のアニメを何秒間かけてやるか この場合3秒です。
animation-iteration-count:infinite;
→ 何回アニメーションするか この場合永遠にリピート。
3とかにしたら3回繰り返して停止します。
animation-timing-function:linear;
→ 始まりや終わりの速度 この場合最初から最後まで同じ速度です。
ease-outなどにするとゆっくり終わります。
animation-direction:alternate;
→ アニメーションの再生方向
奇数回では普通方向の再生、偶数回では逆方向の再生となって
アニメーションサイクルを繰り返します。
他にも
animation-delay 何秒後に始めるか
animation-fill-mode アニメーションの実行前後はどう見せるか
なども設定できます。
これを,で区切れば複数の設定ができるので、コードの単純化が可能です。
ただしanimation-durationとanimation-delayなど
順番を間違えないようにしましょう!
【参考】CSS3リファレンス
http://www.htmq.com/css3/animation.shtml
@keyframes 〇〇{〜} は必ずセットで使います。
(〇〇にはanimation-nameが入ります。)
0%(開始・from)から100%(終了・to)でどう変化させるか細かく決めます。
今回はtranslateとrotateで位置を角度を指定しましたが
背景色を変えたり不透明度を変えたりもできます。
間に30%など書けばもっと細分化できるので、より詳細なアニメーションも可能です。
最初は???と言った感じだと思いますが、
まずはどのプロパティでどう動くのかを知り、工夫してみるのがいいと思います。
数行のCSSで、ページがリッチになりますよ!
以上、animationのお話でした。
しずおかオンライン中途採用社員も、積極募集中!
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら!