CSS3のキーフレームに基づくアニメーション

はじめに

CSS3の新機能について解説する本連載も第3回となりました。第2回で解説したTransitionsモジュールは始点終点の2点間のアニメーション機能を提供するモジュールでした。今回のAnimationsモジュールでは、アニメーション中のキーフレームと呼ばれる任意の点ごとにCSSのプロパティ値を指定することで、Transitionsモジュールでは行えない複雑なアニメーションを実現できます。

再掲：TransitionsモジュールとAnimationsモジュールのアニメーション方法の違い（クリックで拡大）

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

キーフレームに基づくアニメーション - Animationsモジュール

表1：AnimationsモジュールをサポートするWebブラウザとバージョン

Animationsモジュールでは以下のようなプロパティが提供されています。

表2：Animationsモジュールのプロパティ

変化の方法を指定するanimation-timing-functionプロパティには以下の値を指定します（前回のtransition-timing-functionプロパティの値と同じです）。

表3：animation-timing-functionプロパティで指定する値

プロパティ名からも推測できるとおり、多くの機能はTransitionモジュールと同じですが、いくつか違いがあります。

一つは、アニメーションの対象が特定のプロパティ名ではなくキーフレーム定義である、ということです。animation-nameプロパティでは、あらかじめ準備したキーフレーム定義（後述）の名前を指定します。

もう一つはアニメーションの繰り返し機能が付いていることです。こちらについては後ほどサンプルで解説します。