JS不要！CSSだけでできるアニメーション

transition

transitionは要素の変化にかかる時間を指定できるプロパティです。
通常、マウスオーバーした時は瞬時に変わってしまいます。それはtransitionが0秒になっているためです。
これを例えば1秒に変えると、1秒かけて変化していくようなアニメーションが作れます。

メリット

とにかく実装が簡単です。変化させたい箇所に指定するだけで終わりです。マウスオーバーした時にボタンを透過させたり、矢印を動かしたりなどちょっとした変化をつけたい時にとても便利です。

デメリット

簡単な実装のため、細かい動きなどを指定することはできません。また、アニメーションを繰り返しさせることもできません。
変化するか元に戻るかというアニメーションであれば向いているのですが、 繰り返し動作をさせたい時には次に紹介するプロパティを使うといいかもしれません。

animation

animationはアニメーションの設定ができるプロパティです。
animationの指定時は、keyflameを併せて使用します。keyflameは、アニメーションの進行状況でどのような変化をするのかを指定します。例えば、全体で4秒のアニメーションの2秒の時点では青くして、4秒になったら赤くする、という指定ができます。

メリット

詳細な設定ができるので、複雑なアニメーションを作ることが可能です。また、繰り返しの指定もできるので、連続したアニメーションも作ることができます。

デメリット

少し実装が複雑なため、transitionほどの手軽さはありません。
最初はどう使えばいいかわからないかもしれません。でも使い慣れてくれば、いろいろなアニメーションが作れるようになるためとても便利だと思います。

まとめ

どうでしたか？
「意外と簡単そうだな」と思った方も多いのではないでしょうか。
他にもcssだけで作れるアニメーションはたくさんあるので、ぜひ使ってみてください！