CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

Cascading Style Sheets animation-timing-function property.

animation-timing-function

　animation-timing-functionプロパティは、要素にキーフレームアニメーションを適用する場合の、アニメーションのタイミング・進行割合を指定する際に使用します。

　animation-timing-functionでは、アニメーションが継続している際に、そのアニメーションの進行速度の割合を変更して調整することで動きを滑らかにすることができます。これは一般的にイージング機能と呼ばれるもので、グラフィックソフトで曲線を描く際などに利用されるベジェ曲線と呼ばれる数学的な関数を使います。

　animation-timing-functionプロパティでは、アニメーションの進行割合を3次ベジェ曲線で指定します。3次ベジェ曲線は、以下の図のような4つのコントロールポイント（P0、P1、P2、P3）で定義されます。P0がアニメーションの開始ポイント、P3がアニメーションの完了ポイントで、横軸がアニメーション継続時間がどこまで経過したのか、縦軸がアニメーションがどの程度実行されたのかを表します。仮にP0→P3までが直線なら、アニメーションは一定の割合で進行することになります。

　P0（開始ポイント）とP3（完了ポイント）は固定なので、 animation-timing-functionプロパティでは、P1とP2の値を指定することでアニメーションの進行割合を調整します。

　animation-timing-functionプロパティの値には、 ease、linear、ease-in、ease-out、ease-in-outのいずれかのキーワード、または、cubic-bezier関数（3次ベジェ関数）でP1とP2それぞれのXとYの値を指定します。cubic-bezier関数で指定できる値は0～1の範囲内で、その範囲外の場合には無効となります。

　尚、キーフレームアニメーションでは、animation-timing-functionプロパティの指定は、アニメーション全体ではなくキーフレームごとに適用されます。例えば、ease-in-out（ゆっくり始まってゆっくり終わる）を指定した場合、アニメーションはキーフレームの開始時にゆっくりになり、キーフレームの終了時にゆっくりになります。

値

ease

cubic-bezier(0.25, 0.1, 0.25, 1.0) を指定したのと同じ（開始と完了を滑らかにする）（初期値）

linear

cubic-bezier(0.0, 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) を指定したのと同じ（ゆっくり始まってゆっくり終わる）

cubic-bezier(数値, 数値, 数値, 数値)

3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定

初期値・適用対象・値の継承

初期値

ease

適用対象

すべての要素、:before疑似要素、:after疑似要素

値の継承

しない