ケートミィ・メディアラボCSSアニメーションについて-Webデザイン、モーションデザインに関する役立つネタやTipsなどを不定期で更新中しております。CSSアニメーションについてCSSアニメーションについてWeb技術スポンサードリンクこんばんは、ケートミィ・メディアラボの富田です。ここ最近CSSアニメーションを使用する案件がいくつか入ってきたので、これを機に少し研究してみようと思いました。CSS3になってから、従来はJavascriptやFLASHなどを使って表現していた動的な処理がスタイルシートのみで表現できるようになりました。CSS3でのアニメーション表現にはtransitionとanimationという2つの役割の違うプロパティがあるのですが、それぞれ作動する(発火する?)条件が異なっています。transition・・・マウスオーバーやクリックなどのユーザーのアクションで動くアニメーション、スムーズにリストが開いたり、動的なメニューでよく使われています。再生回数の指定や、アニメーションを別に設定してキーフレームの指定が可能です。animationプロパティはわかりやすく言えば、transitionが多機能になったものと考えて頂ければ良いかと思いますが、同一のセレクタに両方を設定してしまわないように注意は必要になりそうです。今回はテストとしてanimationプロパティを使用した下記のようなCSSアニメーションを作成してみました。矩形がズームを繰り返すシンプルな構造のものですが、使用したパーツはすべてCSSを使用しています。scale(1.5,1.5)}}次に上記コードのポイントを解説してみます。0s;animationのプロパティの値は順番でanimation-name、animation-duration、animation-timing-function、animation-deray、animation-iteration-count、animation-directionをスペース区切りで記述できます。animation-nameにanimeを設定した5秒の1回切りで再生終了する2000ミリ秒ディレイの掛かったアニメーションプロパティを作成する場合は以下のようになります。1;animation-name→animation-duration→animation-deray→animation-iteration-countの順に読み込まれているのがわかると思います。style-cssCSSanimation-iteration-count:infinite;1animation-iteration-count:infinite;初期値は1回のみですが上記のように指定すると無限に再生することが可能になります。残るはanimation-timing-function、animation-directionという値ですがこれはそれぞれアニメーションのイーズのかかり方を調整するものと、アニメーションの再生/逆再生を制御する値になっているそうです。イーズのかかり方に関しては数多くの値があるようなので詳しく調べて見る必要がありそうです。ここまで来て気になるのがanimation-nameとはなんぞや、ということなんですが、実はanimationプロパティはキーフレームの設定を@keyframesという処理で別枠で記述する形式になっています。{ページが読み込まれる際に、animationプロパティに記述したanimation-nameと同一名のkeyframesが読み込まれます。@keyframessの後に空白を置いて固有の名前を、大括弧の中にアニメーションさせる対象のプロパティを記述します。scale(1.5,1.5)}@keyframes以下の大括弧内に記述したプロパティなのですが、キーフレームをfromからtoまでをパーセンテージで記述する形式になっています。少ないキーフレームではfrom(0%)、to(100%)の2キーのみで使用することが可能です。その間の1~99%までを任意の区切りではさむことが出来ますが、アニメーションの始め(0%かfrom)と終わり(100%かto)のいずれかでも記述されていないものはエラーと見なされるようです。アニメーション出来ないプロパティについては記述しても無視されますが、keyframesはほとんどのプロパティに適用させることが出来るようです。上記のように途中のキーフレームに書き込まないプロパティがある場合は、その部分が自動的にモーション補完されます。以上のように色々な使い道が想像できるプロパティですが、ブラウザによっては対応していない場合があるので、ベンダープレフィックス等注意が必要になるかも知れません。date*日本語が含まれない投稿は無視されますのでご注意ください。主な制作物についての料金を掲載しています。未掲載のサービスにつきましては、問い合わせフォームよりお気軽にお問い合わせください。ケートミィ・メディアラボ。