新着！ 私の44ページ電子書籍「CSS in 44 minutes」が発売されました！ 😃
#animation-timing-function
アニメーションの開始と終了の間の値をどのように計算するかを定義します。
デフォルト animation-timing-function: ease;
アニメーションはゆっくり始まり、途中で加速し、最後に減速します。
animation-timing-function: ease-in;
アニメーションはゆっくりと始まり、最後まで徐々に加速します。
animation-timing-function: ease-out;
アニメーションはすばやく始まり、最後まで徐々に減速します。
animation-timing-function: ease-in-out;
easeに似ていますが、より顕著です。
アニメーションはすばやく始まり、最後まで徐々に減速します。
animation-timing-function: linear;
アニメーションは一定の速度で進みます。
animation-timing-function: step-start;
アニメーションは即座に最終状態にジャンプします。
animation-timing-function: step-end;
アニメーションは終了するまで初期状態のままで、終了時に即座に最終状態にジャンプします。
animation-timing-function: steps(4, end);
steps()を整数と組み合わせて使用することで、終了に到達するまでの特定のステップ数を定義できます。要素の状態は徐々に変化するのではなく、別の瞬間に状態から状態へジャンプします。