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