【CSS】animationで、ふわふわさせたり、ブルブルさせたりしてみよう
今回は少し技術的な内容です。
例えば何か目立たせたいものがあるときに、バナーや文字などの要素が動いていると目につきやすく、わざわざ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の使い方・設定ルールについて、簡単に解説します。
まず、
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
@keyframes 〇〇{〜} は必ずセットで使います。
（〇〇にはanimation-nameが入ります。)
0％（開始・from）から100％（終了・to）でどう変化させるか細かく決めます。
今回はtranslateとrotateで位置を角度を指定しましたが、背景色を変えたり不透明度を変えたりもできます。
間に30％など書けばもっと細分化できるので、より詳細なアニメーションも可能です。
まとめ
最初は？？？と感じられたと思いますが、まずはどのプロパティでどう動くのかを知り、工夫してみるのがいいと思います。
数行のCSSで、ページがリッチになりますよ。
以上、animationのお話でした。