【Animationsモジュール】テーブルレイアウトを卒業しようこのページに掲載されている内容は、2010年に作成されたものです。前回の記事では、CSS3のTransitionsモジュールによるアニメーションについて紹介しました。今回は、同じくCSS3のAnimationsモジュールについて紹介します。スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。Animationsモジュールも、前回のTransitionsモジュールと同様に、いわゆるアニメーションを設定できます。Transitionsモジュールと違うのは、「キーフレーム」の設定が可能な点です。Transitionsモジュールは、アニメーションの始点と終点のみしか設定できませんが、Animationsモジュールであれば、間にキーフレームを設定して、より複雑な動きにすることができます。キーフレームの設定キーフレームは次のように設定します。現状では、ベンダープリフィクスが必要です。}}ぱっと見でなんとなくわかるかもしれませんが、「animeTest」というのが自分でキーフレームにつけた名前です。経過位置でどのような状態になっているのかを、細かく決めます。今回は0~100%を、10ずつ細かく割りましたが、いくつにわけるかなどは自由です。等分でなくてもいいです。これを実際に適用させるには、Animationsモジュールのプロパティで指定します。Animationsモジュールのプロパティanimation-nameどの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要素で書いてるので覗いてみてください。作るだけでも楽しいですねー。ボタンとかにほんの少し心地よい感じのアニメーションを仕込んでおく、とかステキではないでしょうか。)XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。Twitter大切にします個人情報m-Schoolは、お客さまのプライバシーを守ります。3分コーディングCSS3のアニメーションの設定方法【Animationsモジュール。