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%の指定:背景を黄色、文字色を赤