CSS3のanimationプロパティはCSSでアニメーションさせる際によく使われるプロパティで、複数のCSSプロパティをまとめてアニメーションさせることを可能にします。
animationプロパティの特徴として、『@keyframes』を使ってアニメ―ションの時間変化を設定するところでしょう。『@keyframes』を使うことにより、アニメーションの時間による変化を細かく設定することが可能となります。
以下このエントリでは、「animationプロパティの基本的な使い方」や、animationプロパティと同様にCSSを使ってアニメーションさせる時によく使う「transitionプロパティとの違い」についても説明します。
animationの基本的な使い方
animationプロパティは大きく以下の2つの要素から構成されています。
❶ animationプロパティを使ってアニメ―ションの再生方法の設定。
❷「@keyframes」を使ってアニメーションの時間よる変化（タイムライン）を設定
まず「❶ animationプロパティを使ってアニメ―ションの再生方法の設定」の所でアニメーションの再生方法、再生時間、タイミングなどアニメ―ションの再生の仕方について、後述する8つのプロパティを使用して設定します。
次に、❶で設定した方法で再生させたいアニメーションを、「@keyframes」を使って記述します。
詳しい記述方法やプロパティの使い方については後述します。
See the Pen 20201106-anim01 by muko (@mkpn) on CodePen.
8つのプロパティ
animationプロパティは以下の8つのプロパティを使って設定します。
各プロパティは省略可能ですが、省略した場合は各プロパティの初期値になります。
animation-name
@keyframesで指定した任意のアニメーション名。初期値はnone。
animation-duration
再生時間。初期値は0s。
animation-timing-function
アニメーション速度の変化の仕方。初期値はease。
| ease | アニメーションの開始時から加速していき、終了に向けて減速。初期値。 |
| ease-in | アニメーション開始時はゆっくりで、終了に向けて徐々に加速。 |
| ease-out | アニメーション開始時は速く、終了に向けて徐々に減速。 |
| ease-in-out | アニメーション開始時はゆっくりで加速していき、終了に向けて減速。 |
| linear | 最初から最後まで一定の速度。 |
| step-start | 開始直後にすぐに最後までジャンプ。 |
| step-end | 最後にアニメーションの最後にジャンプ。 |
| steps (正数, start または end) |
指定した正数のステップ数でアニメーションし。startを設定するとすぐアニメーションが開始し、endを設定すると一拍おいてからアニメーションが開始。 |
| cubic-bezier (x軸の値, y軸の値, x軸の値, y軸の値) |
自由にアニメーションの変化を設定できます。X軸は時間の経過、Y軸は変化を表します。参考までに下記のリンクからcubic-bezierの数値を見た目で生成できます。 |
See the Pen 20201106-anim02 by muko (@mkpn) on CodePen.
animation-delay
アニメーションが開始されるまでの時間。初期値は0s。
animation-iteration-count
アニメーションの再生回数・ループ指定。初期値は1。
| infinite | 無限にループ。 |
| 正数 | 指定した回数再生される。 |
animation-direction
アニメーションが再生する方向。初期値はnormal。
| normal | 順方向にアニメーションが再生される。初期値。 |
| reverse | 逆方向（逆再生）でアニメーションが再生される。 |
| alternate | 順方向と逆方向のアニメーションを繰り返す。 |
| alternate-reverse | 逆方向と順方向のアニメーションを繰り返す。逆方向からアニメーションが開始。 |
animation-fill-mode
アニメーション前後のプロパティの状態。初期値はnone。
| none | アニメーション時に適応されるスタイルは、アニメーションの再生前、再生後共に適用されない。初期値。 |
| forwards | 再生後も、アニメーション終了時のスタイルが適用。 |
| backwards | 再生前は、アニメーション開始時のスタイルが適用。 |
| both | forwardsとbackwardsが適用される。つまり、再生前はアニメーション開始時のスタイル、再生後はアニメーション終了時のスタイルが適用される。 |
animation-play-state
アニメーションが一時停止中なのか、再生中なのかを指定。初期値はrunning。
| running | アニメーションが再生されます。初期値。 |
| paused | アニメーションが一時停止する。 |
animationのショートハンド
各プロパティは、まとめて（ショートハンド）記述することができます。
animation-duration（再生時間） / animation-timing-function（時間の変化） / animation-delay（開始の遅延） / animation-iteration-count（ループ・再生回数設定） / animation-direction（再生方向） / animation-fill-mode （再生前後の状態） / animation-play-state（停止中or再生中） / animation-name（名前）
（例）animation: 5s ease-in-out 2s 3 alternate both paused move-block;
@keyframesの設定方法
「@keyframes」を使うことでアニメーションの時間経過による変化を設定します。
設定方法は「from/to」を使う方法と、「％（パーセント）」を使う方法の2種類があります。
「％（パーセント）」で設定する方が、アニメーションの変化をより細かく設定できます。
基本形from/toで指定する
@keyframes アニメーション名 {
from {
CSSプロパティ:値;
}
to {
CSSプロパティ:値;
}
}
アニメーション名は任意で自由に設定できます。
fromの部分にアニメーション開始時のCSSのプロパティ、toの部分にアニメーション終了時のCSSのプロパティを記述します。from部分、to部分ともに複数のCSSプロパティを設定することができます。
See the Pen 20201106-anim01 by muko (@mkpn) on CodePen.
％（パーセント）で指定する
@keyframes アニメーション名 {
0% {
CSSプロパティ:値;
}
100% {
CSSプロパティ:値;
}
0％でアニメーションが開始し、100％で終了します。
また、0%、30％、60％、100%など細かく設定することも可能です。
See the Pen 20201107-anime03 by muko (@mkpn) on CodePen.
animationとtransitionの違い
animationプロパティはアニメーションのループ、自動再生や、再生回数の指定など、再生方法について細かい設定が可能です。
一方、transitionプロパティはマウスオーバー（hover）や、javascriptなどを使い「class」や「id」を付与するなどをトリガーとしてアニメーションが発動します。
また、transitionプロパティはループ再生などができないので、ループ再生させる場合は、animationプロパティを使用します。
≫ 【css】transitionの使い方【各プロパティ サンプルあり】
