CSS3だけで実現するアニメーションとは？

はじめに - CSS3のアニメーション機能

CSS3の新機能の中でも注目したいのが、今回解説するアニメーション機能です。これまでWebページ上でアニメーションを実現する際には、JavaScriptやFlashなどを使う必要がありましたが、CSS3により、ある程度のアニメーション機能をCSSのみで実現できるようになりました。

CSS3のアニメーション機能の基本は「CSSの様々なプロパティの値を連続して変更させていく」というものです。例えば、CSS3からの新機能で、要素の透過率を指定するopacityプロパティを連続的に変化させることで、フェードイン、フェードアウトといったアニメーション処理を実現することができます。

最初にCSS3の新機能の一つで、アニメーション機能との相性も抜群の変形（transform）機能について解説し、その後、2種類のアニメーション機能（TransitionsとAnimations）について解説します。

変形機能 - Transformsモジュール

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

表2：3D TransformsモジュールをサポートするWebブラウザとバージョン

CSS3のTransformsモジュールは要素を幾何学的に変形させる機能を提供するモジュールです。このモジュールを使うことで、拡大・縮小・移動・回転などを行うことができます。なお、CSS3では2次元空間での変形を行う2D Transformsモジュールと、3次元空間での変形を行う3D Transformsモジュールの2種類が提供されます。

CSS3の変形機能は以下のようにtransformプロパティとtransform-originプロパティの2つで構成されています。

表3：変形機能に関連するプロパティ

Transformsモジュールはまだ正式な仕様となっていないため、第1回で解説したとおり、プロパティの先頭にWebブラウザに対応するベンダープレフィックスを付ける必要があるので注意してください。

変形方法を指定するtransformプロパティの値には、以下のような4種類の関数を指定することができます。

表4：transformプロパティで使用できる関数

（＊）これ以外に行列を使った変形を行うmatrixという関数がありますが、数学的な知識が必要になるため省略します。