PR

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

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

はじめに

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

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

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

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

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

Webブラウザ 対応するバージョン
Internet Explorer 10(予定)
Firefox 5.0以上
Chrome 4.0以上
Mac OS X Safari 4.0以上
Opera 12.0以上
iOS Safari 3.2以上
Androidブラウザ 2.1以上

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

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

プロパティ名 意味
animation-name キーフレーム定義の名前を指定する。デフォルトは指定無し
animation-duration アニメーションの長さをsを付けて秒数で指定する。デフォルトは0秒(アニメーションせず瞬時に変化させる)
animation-timing-function アニメーションする際の変化方法を指定する。デフォルトはease
animation-delay アニメーションを行うまでの遅延をsを付けて秒数で指定する。デフォルトは0秒(遅延無し)
animation-iteration-count アニメーションを行う回数を数値で指定する。デフォルトは1
animation-direction アニメーションを反転再生させるかどうか。normalを指定すると順方向のみ再生(デフォルト)。alternateを指定すると順方向、逆方向を繰り返す
animation 以上のプロパティを、上記の順番でまとめて指定する

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

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

意味
ease 最初と最後がなめらかな動作(デフォルト)
linear 直線的な変化
ease-in ゆっくり始まる
ease-out ゆっくり終わる
ease-in-out ゆっくり始まってゆっくり終わる

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

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

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

Think IT会員限定特典
  • CSS3で実現するアニメーションサンプル(2)

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

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

連載バックナンバー

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

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

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

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