アニメーションの設定を一括して行う

説明

アニメーションの設定を一括して行うにはanimationを使います。animationにはアニメーションに必要なプロパティを設定します。最初にはアニメーションのキー名を指定します。このキー名は@keyframesを使って指定します。@keyframes内では10% { color:red; }のようにアニメーションのタイミングと変更するプロパティ値を指定します。
animationの2番目にはアニメーションにかける時間を指定します。5sとすると5秒でアニメーションが行われます。
animationの3番目にはアニメーション処理を行う処理名を指定します。（ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier）
animationの4番目にはアニメーション開始までの時間を指定します。10sならアニメーション開始まで10秒待つことになります。
animationの5番目には繰り返し回数を指定します。infiniteを指定すると無限に繰り返し再生されます。
animationの6番目にはアニメーションの再生方向を指定します。normalなら最初から最後までアニメーションします。alternateなら最初から最後まで再生した後、今度は逆に最後から最初に向かってアニメーションが行われます。
ブラウザによってはベンダープレフィックスを指定しないと動作しません。