animation: アニメーションの設定をまとめて記述
animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction、animation-fill-modeを、組み合わせて指定することができる
animation-name ：キーワード（任意）
アニメーションの名前を決める、後述の@keyframes（具体的な実行内容を指定する記述）で指定されるため必須
animation-duration：数値（単位をs / 秒で指定）
アニメーションが行われる時間を指定する
animation-timing-function：キーワード
アニメーションの速度変化を指定する
- ease 開始と完了を滑らかにする（初期値）
- linear 一定に動かす、機械的に動く
- ease-in ゆっくり始まる、加速がかかる
- ease-out ゆっくり終わる、減速がかかる
- ease-in-out ゆっくり始まってゆっくり終わる、加速・等速・減速がかかるため自然に動く
animation-delay：数値（単位をs / 秒で指定）
アニメーションを開始する時間を設定する
animation-iteration-count：数値またはキーワード
アニメーションを実行する回数
- infinite 無限に再生を繰り返す
- 数値 再生回数を指定（初期値は1）
animation-direction
アニメーションを複数回繰り返す場合、方向を交互に反転再生させるかどうかを指定する
（例：背景を白から黒までアニメーションさせた後、黒から白へと反転させるかどうか）
- normal 普通方向にアニメーションを繰り返し再生する（初期値）
- alternate アニメーションの方向を交互に反転再生させる
animation-fill-mode : キーワード
アニメーション終了後の状態を設定する（アニメーション実行回数が無限の場合無効）
- none アニメーション終了後にcssは適用されなくなる（初期値）
- forwards アニメーション終了後は最後に指定したcssが適用
- backwards アニメーション終了後は最初に指定したcssが適用
例)
h1{
animation: bgChg 10s ease 2s infinite alternate;
}
上記の実行内容：
アニメーションの名前：bgChg
アニメーションする時間：10秒間
アニメーションの速度変化：開始と完了を滑らかにする
アニメーションをいつ開始するか：読み込んでから2秒
アニメーションの繰り返し数：無限
アニメーションの方向：交互に反転再生させる
@keyframesの記述
具体的なアニメーションの実行内容を指定する（キーフレームアニメーションを作成）
@keyframes アニメーションの名前{
0%{プロパティ: 値;プロパティ:値;プロパティ:値;}
50%{プロパティ: 値;プロパティ:値;プロパティ:値;}
100%{プロパティ: 値;プロパティ:値;プロパティ:値;}
}
@keyframesの後にアニメーションの名前を指定（あらかじめanimationプロパティで設定した名前）し、%によるアニメーションの指定を行う。各位置ごとにCSSのプロパティと値を記述（複数指定可）し、それぞれの位置の変化をアニメーションする
例)
@keyframes bgChg{
0%{background-color: #f00;color:#ff0}
50%{background-color: #0f0;color:#000}
100%{background-color: #ff0;color:#f00}
}
指定するアニメーションの名前：bgChg
0%の指定：背景を赤、文字色を黄色
50%の指定：背景を緑、文字色を黒
100%の指定：背景を黄色、文字色を赤
