CSSリファレンス

animationの意味と使い方

「animation」はアニメーションのプロパティを一括で指定します。それぞれの値を任意の順番で、半角スペースで区切って指定します。ただしanimation-durationプロパティとanimation-delayプロパティの値については、先に指定されている値がanimation-durationの値、後に指定されている値がanimation-delayの値とみなされます。
省略された値については初期値が適用されます。複数のアニメーションを適用する場合は、それぞれに対応する値のセットを「,」で区切って記述します。

値の指定方法

animation-name

利用するキーフレームの名前を指定します。


animation-duration

実行する時間を指定します。


animation-timing-function

実行する速度のパターンを指定します。


animation-delay

アニメーションが開始されるまでの待機時間を指定します。


animation-iteration-count

実行する回数を指定します。


animation-direction

アニメーションを繰り返す場合に、逆再生をするかどうかを指定します。


animation-fill-mode

アニメーションの待機中と完了後のスタイルを指定します。


関連プロパティ

  • animation-duration:アニメーションを実行する時間を指定する
  • animation-timing-function:アニメーション速度のパターンを指定する
  • animation-delay:アニメーションを遅れて開始されたい
  • animation-direction:アニメーションを実行する方向を指定する
  • animation-fill-mode:アニメーションの待機中や完了後のスタイルを指定する