アニメーションのプロパティをまとめて指定する

animation

{ animation 【 アニメーション 】 : -name -duration -timing-function -delay -iteration-count -direction -fill-mode -play-state; }

animationプロパティは、アニメーションをまとめて指定するショートハンドです。

初期値 各プロパティに準じる
継承 各プロパティに準じる
適用される要素 すべての要素、:before、:after疑似要素
モジュール CSS Animations Module Level 3

値の指定方法

指定できる値は各プロパティと同様です。それぞれの値は半角スペースで区切って指定します。任意の順序で指定できますが、animation-duration、animation-delayプロパティについては、1つ目がanimation-durationプロパティ、2つ目がanimation-delayプロパティに適用されます。省略した場合は、各プロパティの初期値が適用されます。

サンプルコード

.bnr {
  background: #3cb371;
  animation: bnr-animation 10s infinite;
}

上の例で指定したanimationプロパティは、各プロパティを以下のように指定した場合と同様の表示になります。

.bnr {
  background: #3cb371;
  animation-name: bnr-animation;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

関連記事