第49回 CSS3のアニメーションの設定方法
【Animationsモジュール】テーブルレイアウトを卒業しよう

CSS3のアニメーションの設定方法

前回の記事では、CSS3のTransitionsモジュールによるアニメーションについて紹介しました。今回は、同じくCSS3のAnimationsモジュールについて紹介します。

Animationsモジュールとは

Animationsモジュールも、前回のTransitionsモジュールと同様に、いわゆるアニメーションを設定できます。

Transitionsモジュールと違うのは、「キーフレーム」の設定が可能な点です。

Transitionsモジュールは、アニメーションの始点と終点のみしか設定できませんが、Animationsモジュールであれば、間にキーフレームを設定して、より複雑な動きにすることができます。

キーフレームの設定

キーフレームは次のように設定します。現状では、ベンダープリフィクスが必要です。

@-webkit-keyframes animeTest {
0% {
color: #f333;
}
10% {
color: #fc3;
}
20% {
color: #ff3;
}
30% {
color: #cf3;
}
40% {
color: #3f3;
}
50% {
color: #3fc;
}
60% {
color: #3ff;
}
70% {
color: #3cf;
}
80% {
color: #33f;
}
90% {
color: #c3f;
}
100% {
color: #f3f;
}
}

ぱっと見でなんとなくわかるかもしれませんが、「animeTest」というのが自分でキーフレームにつけた名前です。そして、全体の時間のどれぐらいの 経過位置でどのような状態になっているのかを、細かく決めます。今回は0~100%を、10ずつ細かく割りましたが、いくつにわけるかなどは自由です。もちろん等分でなくてもいいです。

これを実際に適用させるには、Animationsモジュールのプロパティで指定します。

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

animation-name
どのkeyframeを適用するかを指定します。
none(初期値)
keyframe適用なし
keyframe名
適用するkeyframe名。(例えばbackground,marginなど)
animation-duration
アニメーション1回分の再生時間を指定します。値は秒単位(s)で指定できます。
0(初期値)
ゼロ秒で変化します。
秒単位で指定
例えば2sと指定すると、2秒間かけて変化します。
animation-timing-function
時間内でのプロパティの変化度合いを指定します。チョイわかりづらいですが、FlashやShilverlightでは「イージング」とよばれるものですね。加速とか減速とも言えます。
ease(初期値)
滑らかに開始し、滑らかに終了します。
linear
一定に変化します。
ease-in
ゆっくり変化し始め、加速します。
ease-out
急速に変化し始め、減速します。
ease-in-out
ゆっくり変化し始めて加速し、減速しながら終了します。
animation-iteration-count
アニメーションを何回繰り返し再生するかを指定します。
1(初期値)
1回再生して終了します。
回数で指定
例えば2と指定すると、2回繰り返します。
infinite
回数無制限でループ再生します。
animation-direction
アニメーションの再生方向を指定します。
normal(初期値)
0%→100%方向で再生します。
alternate
偶数回目の再生時に100%→0%方向で逆再生します。animation-iteration-countが1の時には設定の意味がありません。逆再生時はanimation-timing-functionも逆になります。(例:ease-inは逆再生時にease-outとなる)
animation-delay
アニメーションが始まるまでのディレイ(遅延)を指定します。
0(初期値)
遅延なしですぐにアニメーションが始まります。
秒単位で指定
例えば2sと指定すると、2秒間後にアニメーションが始まります。

Transitionsモジュールとよく似ていますね。

くだらないデモですが、2つほど。ChromeかSafariで見て下さい。

CSS3ばびゅーん

ぶるぶるアイコン

くだらなすぎた。

CSSはstyle要素で書いてるので覗いてみてください。とても簡単です。

ちょいちょいと作るだけでも楽しいですねー。ボタンとかにほんの少し心地よい感じのアニメーションを仕込んでおく、とかステキではないでしょうか。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
contentプロパティの使い所あれこれ
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読