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