ページのイメージ
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% {-webkit-transform:translate(0, 0) rotate(-5deg);}
50% {-webkit-transform:translate(0, -5px) rotate(0deg);}
100% {-webkit-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% {-webkit-transform:translate(0, 0) rotate(-3deg);}
    50% {-webkit-transform:translate(0, -1px) rotate(0deg);}
    100% {-webkit-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など
順番を間違えないようにしましょう!

@keyframes

@keyframes 〇〇{〜} は必ずセットで使います。
(〇〇にはanimation-nameが入ります。)

0%(開始・from)から100%(終了・to)でどう変化させるか細かく決めます。
今回はtranslateとrotateで位置を角度を指定しましたが
背景色を変えたり不透明度を変えたりもできます。

間に30%など書けばもっと細分化できるので、より詳細なアニメーションも可能です。

最初は???と言った感じだと思いますが、
まずはどのプロパティでどう動くのかを知り、工夫してみるのがいいと思います。
数行のCSSで、ページがリッチになりますよ!

以上、animationのお話でした。

しずおかオンライン中途採用積極募集中!
「womo」「イエタテ」のスタッフとして、地域の魅力を伝える仕事です。

くわしくはこちら!

Category

Ranking