WEB開発デザイン 2017/09/11

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; 
→ アニメーションの再生方向　
奇数回では普通方向の再生、偶数回では逆方向の再生となって
アニメーションサイクルを繰り返します。