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

2012年4月19日(木)
土井 毅(著)山田祥寛(監修)

はじめに - 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で実現するアニメーション

著者
土井 毅(著)山田祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています