CSS3だけで実現するアニメーションとは?
はじめに - CSS3のアニメーション機能
CSS3の新機能の中でも注目したいのが、今回解説するアニメーション機能です。これまでWebページ上でアニメーションを実現する際には、JavaScriptやFlashなどを使う必要がありましたが、CSS3により、ある程度のアニメーション機能をCSSのみで実現できるようになりました。
CSS3のアニメーション機能の基本は「CSSの様々なプロパティの値を連続して変更させていく」というものです。例えば、CSS3からの新機能で、要素の透過率を指定するopacityプロパティを連続的に変化させることで、フェードイン、フェードアウトといったアニメーション処理を実現することができます。
最初にCSS3の新機能の一つで、アニメーション機能との相性も抜群の変形(transform)機能について解説し、その後、2種類のアニメーション機能(TransitionsとAnimations)について解説します。
変形機能 - Transformsモジュール
表1:2D TransformsモジュールをサポートするWebブラウザとバージョン
Webブラウザ | 対応するバージョン |
---|---|
Internet Explorer | 9以上 |
Firefox | 3.5以上 |
Chrome | 4.0以上 |
Mac OS X Safari | 3.1以上 |
Opera | 10.5以上 |
iOS Safari | 3.2以上 |
Androidブラウザ | 2.1以上 |
表2:3D TransformsモジュールをサポートするWebブラウザとバージョン
Webブラウザ | 対応するバージョン |
---|---|
Internet Explorer | 10(予定) |
Firefox | 10.0以上 |
Chrome | 16.0以上 |
Mac OS X Safari | 5.0以上 |
Opera | 未定 |
iOS Safari | 3.2以上 |
Androidブラウザ | 3.0以上 |
CSS3のTransformsモジュールは要素を幾何学的に変形させる機能を提供するモジュールです。このモジュールを使うことで、拡大・縮小・移動・回転などを行うことができます。なお、CSS3では2次元空間での変形を行う2D Transformsモジュールと、3次元空間での変形を行う3D Transformsモジュールの2種類が提供されます。
CSS3の変形機能は以下のようにtransformプロパティとtransform-originプロパティの2つで構成されています。
表3:変形機能に関連するプロパティ
プロパティ名 | 機能 |
---|---|
transform | 要素の変形方法を指定する |
transform-origin | 変形を行う際の基準点を指定する。デフォルトは要素の中心が基準点になる |
Transformsモジュールはまだ正式な仕様となっていないため、第1回で解説したとおり、プロパティの先頭にWebブラウザに対応するベンダープレフィックスを付ける必要があるので注意してください。
変形方法を指定するtransformプロパティの値には、以下のような4種類の関数を指定することができます。
表4:transformプロパティで使用できる関数
関数名 | 機能 |
---|---|
translate | 平行移動。移動量はpxを付けてピクセル単位で指定する |
scale | 拡大縮小。拡大率を1.0を基準として指定する |
rotate | 回転。回転する角度をdegを付けて度で指定する。3D TransformsモジュールではX軸、Y軸を軸に回転するrotateX、rotateYも使用可能 |
skew | ゆがみ。ゆがめる角度をdegを付けて指定する |
(*)これ以外に行列を使った変形を行うmatrixという関数がありますが、数学的な知識が必要になるため省略します。
CSS3で実現するアニメーション