最終更新日

animation-timing-functionプロパティ

animation-timing-functionは、アニメーションの速度に緩急をつけるプロパティです。

アニメーションの速度を「始め・途中・終わり」別に制御することで、変化のタイミングを変えられるようにします。値は、速度のカーブを表すベジェ曲線の座標を、キーワードまたは関数で指定します。

animation-timing-functionの指定は、アニメーション全体ではなく、キーフレームごとに適用されます。例えば、値に「ease-in」を指定した場合、キーフレームの始めは緩やかになり、キーフレームの終わりにかけて加速し続けます。

アニメーション関連のプロパティをまとめて指定する場合は、animationを使用します。

CSS3での変更点
・animation-timing-functionは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
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つの数値で指定します。
サンプルコード
animation-timing-function: ease;
animation-timing-function: linear;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: steps(1, end);
animation-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0);
参考文献:CSS Animations外部リンク
HOME