CSSアニメーション（animation）
CSSアニメーション（css3のanimationプロパティ）は、HTML要素に「キーフレーム」を適用し、アニメーションを実現する仕組みです。キーフレームは、%で（アニメ全体に対する相対的な）時間指定を行うことで各時間におけるCSSの適用を設定することができます。
CSSアニメーションのキーフレームは、以下のように「keyframes」として名前と時間ごとのCSSを列挙し、定義します。
@keyframes anime_1 {
0% { transform: scalet(1.0); }
50% { transform: scale(2.0); }
100% { transform: scale(1.0); }
}CSS（外部cssやstyleタグ内）としてこのようなkeyframesを定義しておくと、animationでキーフレームを適用してアニメーション化することができます。animationの設定は、transitionと同様に
animation: keyframes名 アニメーション時間 変化の形 遅延時間 繰り返し数
の形で行います。試しに、「anime_1」を1200ミリ秒でアニメ表示するサンプルを実行してみましょう。
キーフレームテストボタンをクリックすると、「キーフレームテスト」の枠に対して「50%の時点で2倍に拡大し、最後には元の大きさに戻る」anime_1のキーフレームが1200ミリ秒かけて適用されます。
CSSのanimationによるスタイル変化は、終了後にanimation適用前の状態（元々のスタイル設定）に戻されます。100%時の設定は、0%と合わせるなどしてHTML要素をアニメ終了後にどう見せるか意識して設定した方が良いでしょう。
keyframesには、複数のCSSプロパティを指定できます。よく使われるのは、透明度を設定するopacityでフェードイン／フェードアウトさせながらtransformで移動／変形させるアニメーションですね。
keyframesを以下のように書き換えてみましょう。
@keyframes anime_2 {
0% { transform: scalet(1.0); opacity: 1.0; }
50% { transform: scale(2.0); opacity: 0.0; }
100% { transform: scale(1.0); opacity: 1.0; }
}今度は、大きさと同時に透明度（opacity）も変化するようになりました。
最後に、無限に繰り返すアニメーション効果を試してみましょう。CSSアニメーションでは、「アニメーションの時間」をキーフレームとは別に設定できるので、同じキーフレーム（変化のパターン）を異なる時間間隔で適用することができます。これは、ページを読み込んでからずっと再生し続ける「GUI用HTML要素のアニメーション」に使えそうですね。
上のボタンは、以下のkeyframesをそれぞれ1200ms/2400msで適用しています（繰り返し指定はinfinite）。
@keyframes anime_3 {
0% { transform: rotate(0deg); color: #000000; opacity: 1.0; }
25% { transform: rotate(30deg); color: #00cc00; opacity: 0.0; }
50% { transform: rotate(0deg); color: #000000; opacity: 1.0; }
75% { transform: rotate(-30deg); color: #cc0000; opacity: 0.0; }
100% { transform: rotate(0deg); color: #000000; opacity: 1.0; }
}