最終更新日
transition-timing-functionは、変化中の速度に緩急をつけるプロパティです。
プロパティの遷移に関して、変化の速度を「始め・途中・終わり」別に制御することで、変化のタイミングを変えられるようにします。
値は、速度のカーブを表すベジェ曲線の座標を、キーワードまたは関数で指定します。遷移対象のプロパティを複数指定した場合、transition-timing-functionの値も、カンマで区切って複数指定できます。
遷移関連プロパティの値をまとめて指定する場合は、transitionを使用します。
初期値 | 適用先 | 継承 |
---|---|---|
ease | すべての要素、::before擬似要素セレクタ、::after擬似要素セレクタ | なし |
値 | 説明 |
---|---|
ease | 遷移の始めは緩やかに、徐々に加速し、最後にスッと減速します。 cubic-bezier(0.25, 0.1, 0.25, 1.0)と同じです。(初期値) |
linear | 遷移の始めから終わりまで一定の速度で変化します。 cubic-bezier(0, 0, 1.0, 1.0)と同じです。 |
ease-in | 始めは緩やかに、終わりにかけて加速し続けます。 cubic-bezier(0.42, 0, 1.0, 1.0)と同じです。 |
ease-out | 始めから最大速度で、最後は緩やかに終わります。 cubic-bezier(0, 0, 0.58, 1.0)と同じです。 |
ease-in-out | 始めは緩やかに、途中で加速し、最後また緩やかに終わります。 cubic-bezier(0.42, 0, 0.58, 1.0)と同じです。 |
step-start | 始めから終了状態の値に一気に変化し、以後変化しません。 steps(1, start)と同じです。 |
step-end | 始めは変化せず、最後に終了状態の値に一気に変化します。 steps(1, end)と同じです。 |
steps(ステップ数, startかend) | プロパティの値の時間的変化を、複数の段階に分けて行います。1個目の値には、ステップ数を0以上の整数で指定します。2個目の値には、startかendを指定します。2個目の値を省略した場合は、endが適用されます。 |
cubic-bezier(P1のX座標, P1のY座標, P2のX座標, P2のY座標) | ベジェ曲線を描くためのP1、P2の座標を、0.0~1.0の範囲の4つの数値で指定します。 |
transition-timing-function: ease; transition-timing-function: linear; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: step-start; transition-timing-function: step-end; transition-timing-function: steps(1, end); transition-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0);