直樹2012.11.1572825この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。Animationについて学んだことについてもここらでまとめておくとします。はじめにTransitionは対象となる要素の始点と終点の状態をそれぞれ定義して、スムーズに変化させるという機能でした。対するAnimationは、始点と終点の間にキーフレームを配置してその時点ごとの状態をそれぞれ指定し、よりダイナミックなアニメーションが実現できます。アニメーションAnimationプロパティの詳細は、コチラのサイトにて非常に分かりやすく的確にまとまっているので、当ブログでは特別な要点以外は割愛します。Animationプロパティでは、以下の7つの項目をまとめて指定することが出来ます。(遅延時間)animation-iteration-countアニメーションの繰り返し回数animation-directionアニメーションの再生方向animation-fill-modeアニメーションの実行前と実行後に適用するスタイルanimation-nameは、実際にどのような動きをするかを定義した@keyframesを指定し、唯一の必須項目です。none;animation-name以外のプロパティは全てオプション扱いとなり、省略した場合は記述例にある値が初期値として指定されます。@keyframes@keyframesは、要素に対してどのようなアニメーションをするのかというのを定義したもので、プログラミングでいう関数に扱いが似ています。アニメーションの始点をfrom(もしくは0%)で指定し、終点をto(もしくは100%)で指定します。これだけではTransitionと同じですが、0%と100%の間に25%、50%、80%と細かくキーフレームを配置して、それぞれに要素の状態を定義することが出来ます。}}%でキーフレームを配置し、それぞれのブロック内にそのタイミングの状態を指定します。ブロック内は通常のCSSと同じように記述します。当記事執筆時点(2012年11月)では、transitionプロパティやanimationプロパティと同様にベンダープレフィックスが必要になります。事始めマウスオーバー時にdiv要素をアニメーションで変形させてみます。いくつかのキーフレームを配置し、段階的に色々と変化させてみます。※ベンダープレフィックスは省略していますが、実際のコードでは必要となります。(animation1)いくつかプロパティが指定されていますが、ここではbackground-colorに着目します。アニメーション開始時に#e61374が適用されます。そこから次の背景色が指定されている50%のキーフレームに向けて色が変化していきます。その先のキーフレーム(100%)では背景色が指定されていないので、初期値である#fffに変化していきます。animation-fill-mode簡単に言うと、アニメーションの実行前と実行後はどのような状態にしておくかを指定するプロパティです。animation-fill-modeで指定できるプロパティは、以下の4種類です。animation-fill-modenone実行前の遅延時間と実行後はアニメーション呼出前の状態となる※初期値forwards実行後の状態がアニメーション終了時の状態(100%)で保持されるbackwards実行前の遅延時間の間、アニメーション開始時の状態(0%)で保持されるbothforwardsとbackwardsの両方が適用される。機能を活かしたプリローダーを作ってみるJavaScriptに一切頼らずに、CSSだけでプリローダー風のアニメーションを作ってみることにします。完成イメージはこんな感じです。ひとつずつ実装していきます。</ul></body>プリローダーの始点と終点のポイント、および二点間を結ぶラインをlist要素で定義します。ポイントは核とパルスをそれぞれ表現する為にspan要素でそれぞれ定義したものをネストします。}はじめにpreloaderの子要素をfloatプロパティで横並びにします。次にポイントのスタイルを作ります。inner-point要素に円形のスタイルを適用し、pulse要素はポイントを囲むような光の輪にします。}line要素はラインのいわゆるコンテナであり、inner-line要素はゲージに相当します。ここまでで基本的な見栄えはできました。初期値ポイントおよびパルスの初期状態を指定します。同様にラインの初期状態を指定します。}それぞれの要素がアニメーションで表示されるので、初期状態はtransform:scale()を使ったり、widthを0にするなどして非常時状態にしておきます。ブラウザで確認してみると何も表示されなくなっているかと思います。キーフレームアニメーションポイントのアニメーションを定義します。}}続いてパルスのアニメーションも定義します。}}アタマ光がパーンと弾けるようなイメージで動きを指定します。最後にラインのアニメーションを定義します。}}これでアニメーションの定義が一通りできました。呼び出し各要素に対してアニメーション呼び出しの処理を追記していきます。forwards;}始点と終点のポイントのアニメーション呼び出しを指定しました。終点の方はラインのアニメーションが終わったタイミングで開始させるために遅延時間を指定しています。※本来はJavaScriptを使って動的に制御するのがベターですが、今回はあくまでサンプルということで、あえてこのように書きましたよ、と。ラインのアニメーション呼び出しを追記します。以下のリンクよりデモをご覧いただけます。(preloader)おわりにレガシーなブラウザをサポートしなくてはならない状況においては、アニメーションの実装はJavaScriptに頼らざるを得ません。仮にモダンブラウザのみに的を絞った状況においても、コードの記述に独特のクセがあるからなのかCSS3アニメーションでなく、慣れ親しんだJavaScriptによるアニメーション実装がなされているという傾向も未だにあるかと思います。CSS3アニメーションは、Webkit系ブラウザではJavaScriptと比較しても遜色ない滑らかな動きを実現しますが、Firefoxではいささか動きにもたつきが見られたり、IEはVer.10以降でなければそもそも動かないなど、まだまだ発展途上の段階にいます。要素の状態を定義するという意味では、やはりアニメーションをCSSで定義するというのは理屈が通っていますし、パフォーマンスの観点からも使える場面では積極的に活用するべきです。主要ブラウザ全般で一律に使えるようになるのはいつになるかサッパリ分かりませんが、そのときに備えて学習の歩を進めていくのがよろしいかと思います。いまからでも遅くないです。