tochio

CSS3でアニメーション:初歩の初歩

まだすべてのモジュールが勧告には至っていませんが、CSS3でアニメーションが使えるようになって数年たち、複雑ではないちょっとした動きなら、クライアントからCSSでの実装を依頼されることが増えてきました。
CSS3アニメーションを使う際のネックになっていた、IE8、IE10のサポートも終了したことで、ますます使う機会が増えるのではないかと思います。(VistaのIE9は生き残っていますが…)

配布されているソースを貼るだけで普通に動いてくれるので、どのプロパティが何を指定するものなのか、漠然としかわからないまま使っていましたが、使ってみたら、意外と理解できていないことが多かったので、調べました。

CSS3のアニメーションには「animation」と「transition」がありますが、まずはその違いから。

■animation

  • ループできる
  • 自動再生できる
  • keyframesで、動きを細かく指定できる

■transition

  • ループできない
  • 自動再生できず、hover・click等のアクションに対するリアクションとして動く

animationのプロパティ

■animation-name
アニメーションを適用するkeyframesの名前
この名前とkeyframs名が一致していないと動かない。
■animation-duration

アニメーションの再生時間

  • 0s:初期値
  • その他、1s、100msなどの書き方で、秒数を指定
  • マイナスの値はすべて初期値の「0s」となる
■animation-timing-function

アニメーションの速度変化

  • ease:初期値。ゆっくり始まる→加速→ゆっくり終わる
  • ease-in:ゆっくり始まる→加速して終わる
  • ease-out:速く始まる→ゆっくり終わる
  • ease-in-out:easeよりゆっくり始まる→加速→ゆっくり終わる
  • linear:一定の速度で始まって終わる
■animation-delay

アニメーション開始までの時間

  • 0s:初期値
  • その他、1s、100msなどの書き方で、秒数を指定
  • マイナスの値はすべて初期値の「0s」となる
■animation-iteration-count

アニメーションの再生回数

  • 1:初期値
  • 1.5:小数点も設定可
  • infinite:再生され続ける
■animation-direction

アニメーションの再生方向
animation-iteration-countで2回以上の再生回数を設定しているときの、アニメーションの再生方向を設定できます。

  • normal:初期値。奇数回は正方向に再生→終了→反転せずに初期の状態に戻って正方向に再生、を繰り返す
  • alternate:奇数回は正方向に再生→終了→偶数回は反転して逆方向に再生、を繰り返す
  • reverse:逆方向に再生、を繰り返す
  • alternate-reverse:alternateの逆の動き。奇数回は逆方向に再生→終了→偶数回は反転して正方向に再生、を繰り返す

以下のサイトにわかりやすいサンプルがあります。
CSS3でアニメーション!transitionとanimationまとめ(サンプル付き) | フラップイズム

■animation-fill-mode

アニメーションの再生前、再生後の状態を指定

  • none:初期値。
  • forwards:アニメーション終了後の要素のスタイルは、最後のキーフレームの状態
  • backwards:アニメーション再生前の要素のスタイルは最初のキーフレームの状態
  • both:アニメーション再生前の要素のスタイルは最初のキーフレームの状態
■@keyframes
アニメーションの変化の指定

ショートハンドでまとめて記述する場合は、「animation: name duration timing-function delay iteration-count direction fill-mode」の順に記述し、省略された値は初期値となります。
また、時間を指定するプロパティに関しては、animation-duration(アニメーションの再生時間)、animation-delay(アニメーション開始までの時間) の順に解釈されるので、先にanimation-durationを記述してください。

仕様の詳細は、以下でご確認ください。
animation - CSS | MDN

例:背景の色が変化するNEWアイコン

See the Pen animation by Hiromi Tochio (@tam-tochio) on CodePen.

注意点

Firefoxでは、animation-durationとanimation-delayの値に「0」と指定すると、アニメーションが動きません。「0s」と指定するとちゃんと動きます。 「0」になっていると、ベンダープレフィックスを付けても動きませんので、「ちゃんと書いているはずなのに動かない!」と思ったら、ここを確認してみましょう。

transitionのプロパティ

■transition-property

transitionの対象になるCSSプロパティ

  • all:すべて
  • 各プロパティ名:font-size,background-color のように、カンマ区切りで複数指定できる
  • 「none」を設定することもできますが、これだと何もtransitionの対象になりません。
■transition-duration

アニメーションの再生時間

  • 0s:初期値
  • その他、1s、100msなどの書き方で、秒数を指定
  • マイナスの値はすべて初期値の「0s」となる
■transition-timing-function

アニメーションの速度変化

  • ease:初期値。ゆっくり始まる→加速→ゆっくり終わる
  • ease-in:ゆっくり始まる→加速して終わる
  • ease-out:速く始まる→ゆっくり終わる
  • ease-in-out:easeよりゆっくり始まる→加速→ゆっくり終わる
  • linear:一定の速度で始まって終わる
■transition-delay

アニメーション開始までの時間

  • 0s:初期値
  • その他、1s、100msなどの書き方で、秒数を指定
  • マイナスの値はすべて初期値の「0s」となる

ショートハンドでまとめて記述する場合は、「transition: property duration timing-function delay;」の順に記述し、省略された値は初期値となります。

仕様の詳細は、以下でご確認ください。
transition - CSS | MDN

例:マウスオーバーしたときに、幅:200px→400pxに変化しつつ、背景色:赤→青に変化し、マウスが外れると元に戻る

See the Pen transition by Hiromi Tochio (@tam-tochio) on CodePen.

注意点

transitionでも、Firefoxではtransition-durationとtransition-delayの値を「0s」と記述しておかないと、想定通りの動きになりません。

ベンダープレフィックスの要不要について

Safari9、iOS Safari9.2、Android 5.0以前のバージョンに搭載されているAndroid Browserでは、ベンダープレフィックスが必要です。(2016年1月現在)
上にあげたブラウザが案件のターゲットブラウザに入っているときのみ、WebKit用のベンダープレフィックスを使うか使わないか判断すればいいでしょう。

参考サイト

お問い合わせはこちら