アニメーションに関連する animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state をまとめて指定します。

個々の値は省略可能で順序も変更可能ですが、1s など時間と解釈される値のみは、一つ目が animation-duration、二つ目が animation-delay として解釈されます。

CSS3 でアニメーションに関るプロパティがサポートされました。下記の使用例にあるように、@keyframes によりアニメーション開始時の CSS スタイル(to)と、終了時の CSS スタイル(from)を定義し、animation プロパティなどで、速度、繰り返しなどを指定します。

アニメーションに関するルール、プロパティには下記があります。

• @keyframes - フレームを定義します。
• animation - 下記のプロパティをまとめて指定します。
• animation-name - @keyframes で定義したフレーム名を指定します。
• animation-duration - 変化にかける時間を指定します。
• animation-timing-function - アニメーションの変化タイミングを指定します。
• animation-delay - アニメーションを開始するまでの遅延時間を指定します。
• animation-iteration-count - 繰り返し回数を指定します。
• animation-direction - 逆方向のアニメーションの実施ルールを指定します。
• animation-fill-mode - アニメーション開始時、終了時の効果の適用を指示します。
• animation-play-state - アニメーションの実行状態を参照、または設定します。

下記の例では、青みがかった(#66f)小さめの文字(20pt)から、赤みがかった(#f66)大き目の文字(24pt)にアニメーションで変化します。1回の変更は 0.5秒(0.5s)で、最初緩やかに後半は早く(ease-in)動きます。開始時の遅延時間は 1秒(1s)で、無限(infinite)に繰り返します。赤から青への逆方向のアニメーションも実施します(alternate)。開始時、終了時には、アニメーション開始・終了時のスタイルが適用されます(both)。

@keyframes myframe {
  from {
    color: #66f;
    font-size: 20pt;
  }
  to {
    color: #f66;
    font-size: 24pt;
  }
}
.test {
  position: absolute;
  animation: myframe 0.5s ease-in 1s infinite alternate both;
}

<div class="test">A</div>

• http://www.w3.org/TR/css3-animations/#animation-shorthand-property
• https://developer.mozilla.org/ja/docs/Web/CSS/animation
• http://caniuse.com/#feat=css-animation