時間的変化 (CSS Transition) によるシンプルなアニメーション
・transition:[property] [duration] [delay] [timing-function];
・transition-property:変化させるプロパティ名
* all:変化を適用できるプロパティすべてが変化する (初期値)
* none:どのプロパティも変化しない
* プロパティ名:変化させるプロパティ名のリストをカンマ (,) 区切りで指定
・transition-duration:所要時間
・transition-delay:遅延時間
・transition-timing-function:タイミング・進行割合
* ease:開始と完了を滑らかにする (初期値)
* linear:一定
* ease-in:ゆっくり始まる
* ease-out:ゆっくり終わる
* ease-in-out:ゆっくり始まってゆっくり終わる
* cubic-bezier(x1, y1, x2, y2):3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
CASE. 要素をホバーした時にアニメーションする
.box {
transition:background 1s 0s ease;
}
.box:hover {
background:#f2e26d;
}
キーフレームアニメーション(CSS Animation)
・animation:[name] [duration] [timing..] [delay] [iteration..] [direction] [fill..] [play..];
・animation-name:アニメーション名
・animation-duration:所要時間
・animation-timing-function:タイミング・進行割合
* ease:開始と完了を滑らかにする (初期値)
* linear:一定
* ease-in:ゆっくり始まる
* ease-out:ゆっくり終わる
* ease-in-out:ゆっくり始まってゆっくり終わる
* cubic-bezier(x1, y1, x2, y2):3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
・animation-delay:遅延時間
・animation-iteration-count:ループ回数
* infinite:アニメーションは無制限に繰り返されます。
・animation-direction:アニメーション再生の向き
* ease:開始と完了を滑らかにする (初期値)
* normal:毎回順方向に再生
* reverse:毎回逆方向に再生
* alternate:毎回反転させ再生 (順 → 逆 → 順 → 逆・・・
* alternate-reverse:毎回反転させ再生 (逆 → 順 → 逆 → 順・・・
・animation-fill-mode:CSS アニメーションの実行前後のスタイル設定;
* none:既定値
* forwards: (実行後) 実行の最後のキーフレームで設定された計算値を保持
* backwards: (実行前) キーフレームで定義された値を delay の期間中も適用
* both:アニメーションの設定は実行前と実行後の両方に適用
・animation-play-state:再生中か一時停止かを指定
* running:アニメーションを再生中にする (初期値)
* paused:アニメーションを一時停止にする
CASE. 要素をホバーした時にアニメーションする
.box:hover {
animation:ani-color 1s ease 0s 1 normal forwards running;
}
@keyframes ani-color{
100% { background:#f2e26d; }
}