memocarilog

animation プロパティを使用すると transition （CSS3、transitionでアニメーションを使う | memocarilog）よりも細かくアニメーションの動きを指定できるので、複雑なアニメーションの表現ができます。

animation もまた、現時点でIEは全く対応しておらず、その他のブラウザでもベンダープレフィックスが必要です。

tansitionと同じようにアニメーションさせたい要素に、animationの6つのプロパティを指定する事により動きを表現できます。プロパティはまとめて書く事もできます。
tansitionと違うところは、animationプロパティの記述とは別に、@keyframesルールでアニメーションの動きの定義が必要です。

animationの各プロパティの説明とキーフレームの記入の仕方、サンプルデモです。

1. animation-name

アニメーションのキーフレームの名前です。複数ある場合はカンマで区切って指定。

記入例

キーフレームの名前を example-animation とする場合

animation : example-animation

2. animation-duration

アニメーションにかかる時間を指定する。

記入例

1秒かけてアニメーションする

transition-duration : 1s ;

3. animation-timing-function

アニメーションの動きの指定。
ease , linear , ease-in , ease-out , ease-in-out の値を入れる事ができる。

記入例

transition-timing-function: ease ;

動きのデモはこちらの記事”CSS3、transitionでアニメーションを使う | memocarilog”をご参照下さい。

4. animation-delay

何秒後にアニメーションを開始するかを指定。

記入例

transition-delay: 2s ;

5. animation-iteration-count

アニメーションを何回繰り返すかを指定。infinite としてすると無限に繰り返す。

記入例

animation-iteration-count : 2;
↑2回アニメーションを繰り返す

animation-iteration-count: infinite;
↑永遠に繰り返す

6. animation-direction

normal を指定でアニメーションが一方向へ再生される。
alternate を指定するとアニメーションが往復して再生される。

記入例

animation-direction: normal;
animation-direction: alternate;

参照：animation－CSS3リファレンス

キーフレーム @keyframes の書き方

@keyframesにもベンダープレフィックスの記述が必要です。％で変化を指定して行きます。0％を始点として100％が終点になります。
0％〜100％までの間は細かく（1％の間隔でも）動きを指定する事ができます。@keyframesのすぐ後には、animation-nameで記入したアニメーションの名前を記入します。

記入例

@-webkit-keyframes  アニメーションの名前 {
	0% {
		最初の状態を記入
	}
	100%{
		最終的な状態を記入
	}
}

例えば、小さなボックスが25％の間隔で20pxずつ大きくなり、25％の間隔で円形と四角に変わり、色をグレーからピンクへ徐々に色を変化させていくという動きの設定だと以下のようにCSSファイルへ記入します。

@-webkit-keyframes example {
	0% {
		width:20px;
		height:20px;
		background-color:#817787;
	}
	25% {
		width:40px;
		height:40px;
		background-color:#BDAEC5;
		border-radius: 50%;
	}
	50% {
		width:60px;
		height:60px;
		background-color:#D5C5DE;
		border-radius: 0;
	}
	75% {
		width:80px;
		height:80px;
		background-color:#E8D7F1;
		border-radius: 50%;
	}
	100%{
		width:100px;
		height:100px;
		background-color:#F4E2FE;
		border-radius: 0;
	}
}

サンプルデモ

上記のキーフレームで再生したサンプルデモです。

サンプルのHTMLとCSSのコードはデモのタブをクリックして切り替えられます。

animation-direction に alternate を指定してアニメーションを往復させると下のようになります。