【CSSアニメーション】animationと@keyframesについて
はじめに
今回はCSSでアニメーションを実装する時によく使うanimationプロパティと@keyframesについて備忘録として残そうと思います。駆け出しの方であったり、感覚でコードを書いている方々は必ず全員このanimationプロパティと@keyframesで躓くと思います。（ソースはワイ）
animationプロパティと@keyframesを簡単にでも抑えておくことで実装できるアニメーションの幅が広がり、ワンランク上のwebアプリケーションを開発できます。
animationプロパティについて
animationプロパティとはその名の通り、アニメーションを作成するCSSプロパティとなっております。種類が多いので以下で簡単にまとめました。
animationプロパティ一覧
| プロパティ | 概要 | 初期値 |
|---|---|---|
| ①animation-name | アニメーション名（@keyframes名） | none |
| ②animation-duration | アニメーションが開始してから終了するまでの時間 | 0 |
| ③animation-timing-function | アニメーションの速度 | ease |
| ④animation-delay | アニメーションが開始するまでの時間 | 0 |
| ⑤animation-iteration-count | アニメーションを繰り返す回数 | 1 |
| ⑥animation-direction | アニメーションの再生方向（順番） | normal |
| ⑦animation-fill-mode | アニメーション開始時と終了時のスタイルの状態 | none |
| ⑧animation-play-state | アニメーションの再生・停止 | running |
※簡単にまとめただけなので詳しい値の記述方法については以下のドキュメントを見てみて下さい。
尚、上記一覧のプロパティを一括で指定するプロパティもあります。一括で指定する場合は一覧の上から順番に記述します。
.sample {
animation:①-name ②-duration ③-timing ④-delay ⑤-iteration ⑥-direction ⑦-fill ⑧-play;
}
@keyframesについて
@keyframesはアニメーション開始から終了までどのような動きをするのかを指定できるものです。animationプロパティと一緒に使うと、より複雑にアニメーションを展開することができます。
基本の書き方は以下になります。
@keyframes アニメーション名(なくても良い) {
0% {
CSSプロパティ:値;
}
100% {
CSSプロパティ:値;
}
}
0%はアニメーションの開始、100%はアニメーションの終わりを表しています。（0%はto、100%はfromに置き換え可能）
transitionとの違いについて
animationの他にもtransitionでもアニメーションを実装できます。
双方の違いに関しては、以下の表でまとめました。
| - | animation | transition |
|---|---|---|
| ループ | ○ | × |
| 再生回数設定 | ○ | 一回のみ再生 |
| 遅延設定 | ○ | ○ |
| 緩急設定 | ○ | ○ |
| 再生時のトリガー | 自動再生可能 | hoverやactiveの疑似要素 |
| アニメーションの方向 | ○ | × |
おさえておくポイントとしては、transitionはアニメーションの始まりと終わりのみ指定できるのに対し、animationはアニメーションの動きを細かく指定可能となります。他にも、transitionはマウスホバーや、クリック等のトリガーが必要なのに対し、animationはトリガーが不要となります。
これだけ見ると、一見animationしか勝たんくね？と思うかもしれませんが、実際の話、一長一短で適材適所になります。
自動再生やループするような細かい設定が必要なアニメーションはanimation、それ以外はtransitionと覚えておけば良いでしょう。
transitionに関しては今回は説明しませんのでわからない方、気になった方は以下のドキュメントを見てみて下さい。（気分によっては記事書くかもしれないです）
animationと@keyframesでの実装方法
簡単な例としてローディングアニメーションを作ってみました。
参考
Discussion