最終更新日 2021年6月22日

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

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。