PR

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という関数がありますが、数学的な知識が必要になるため省略します。

Think IT会員限定特典
  • CSS3で実現するアニメーション

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

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

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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