tochio

2016.01.26

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

HTML・CSS

まだすべてのモジュールが勧告には至っていませんが、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用のベンダープレフィックスを使うか使わないか判断すればいいでしょう。