<timing-function>

<timing-function>CSSデータ型で、一次元の値がアニメーションの間にどれだけの速さで変化するかを記述する数学的な関数を表します。

「円滑な」タイミング関数は、よくイージング関数と呼ばれます。これらの関数は時間の割合と出力値の割合を表し、どちらも <number> で示されます。これらの値は 0.0 の値は初期状態、 1.0 の値は最終状態を示します。

特定の関数が使用された場合によっては、計算された出力値がアニメーションの経路の間で、時には 1.0 を超えたり、 0.0 を下回ったりすることがあります。これによってアニメーションが最終状態の後に行ったり、戻ったりすることになります。 leftright のような一部のプロパティは、これによって一種の「バウンド」効果を生成します。

しかし、色の成分の値が 255 を超えたり 0 を下回ったりするように、出力値が取り得る範囲を超えてしまう場合は、その値は取り得る値の中で最も近い値に切り詰められます (色の成分の値であれば、それぞれ 255 および 0 になります)。一部の cubic-bezier() 曲線にはこのような特性があります。

タイミング関数

CSS は 2 種類のタイミング関数に対応しています。3次ベジェ曲線のサブセットの関数と、階段関数です。これらの関数でもっとも有用なものは、簡単に指定できるようにキーワードが与えられています。

cubic-bezier() クラスのタイミング関数

cubic-bezier() 関数記法は、3次ベジェ曲線 を定義します。この曲線は連続的であり、アニメーションの始まりや終わりを緩やかにするためによく使用されます。このため、イージング関数と呼ばれることもあります。

3次ベジェ曲線は 4 個の点 P0, P1, P2, P3 によって定義されます。P0 と P3 は曲線の始点と終点であり、 CSS では座標が割合 (横座標は時間の割合、縦座標は出力範囲の割合) であることから、これらの点は固定されています。P0(0, 0) で開始時間および初期状態を示し、P3(1, 1) で終了時間および最終状態を示します。

すべての3次ベジェ曲線が数学的な関数 とは限らないため、どの3次ベジェ曲線でもタイミング関数として適しているわけではありません。すなわち、曲線は横座標で 0 から 1 の値をとります。 P0 および P3 は CSS の定義で固定されているので、P1 および P2 の横座標の値が [0, 1] の範囲にある場合のみ、3次ベジェ曲線は関数であり、それゆえ有効になります。

P1 または P2 の縦座標の値が [0, 1] の範囲から外れている3次ベジェ曲線では、はずむ効果が得られます。

不正な cubic-bezier 曲線を指定すると、 CSS はその属性全体を無視します。

構文

cubic-bezier(x1, y1, x2, y2)

ここで、

x1, y1, x2, y2
3次ベジェ曲線を定義する P1 および P2 点の横座標および縦座標の値を示す <number> です。x1 および x2 は [0, 1] の範囲にある必要があり、さもないと不正な値になります。

これらの3次ベジェ曲線は CSS での使用が妥当です。

/* 4 つの値が [0, 1] の範囲に含まれる、標準的なベジェ曲線 */
cubic-bezier(0.1, 0.7, 1.0, 0.1)   

/* <整数値> は <数量> でもあるので、<整数値> を用いても有効です。 */
cubic-bezier(0, 0, 1, 1)           

/* 縦軸で負数を用いるのは有効であり、はずむ効果をもたらします。 */
cubic-bezier(0.1, -0.6, 0.2, 0)    

/* 縦軸において 1.0 を超える値も有効です。 */
cubic-bezier(0, 1.1, 0.8, 4)

これらの3次ベジェ曲線の定義は不正です。

/* アニメーションさせるものは色ですが、
   ベジェ曲線に用いるのは割合の数値です。 */
cubic-bezier(0.1, red, 1.0, green) 

/* Abscissas must be in the [0, 1] range or 
   the curve is not a function of time. */
cubic-bezier(2.45, 0.6, 4, 0.1)    

/* 2 つの点を定義する必要があり、それらに既定値はありません。 */
cubic-bezier(0.3, 2.1)   

/* 横座標は [0, 1] の範囲にある必要があり、
   さもないと曲線はタイミング関数になりません。 */
cubic-bezier(-1.9, 0.3, -0.2, 2.1) 

一般的なタイミング関数のキーワード

linear

アニメーションは初期状態から最終状態へ規則的に、一定の速度で変化します。このキーワードは、タイミング関数 cubic-bezier(0.0, 0.0, 1.0, 1.0) を表します。

ease

アニメーション開始時はより急速に加速して、終了に向けて少しずつ緩やかになっていきます。このキーワードは、タイミング関数 cubic-bezier(0.25, 0.1, 0.25, 1.0) を表します。この関数は ease-in-out に似ていますが、開始がより急速です。

ease-in

アニメーションの始めは緩やかで、その後次第に加速していき、最終状態に達するとアニメーションは突然停止します。このキーワードはタイミング関数 cubic-bezier(0.42, 0.0, 1.0, 1.0) を表します。

ease-in-out

アニメーションは緩やかに始まり、加速し、終了に向けて加速が緩やかになります。このキーワードはタイミング関数 cubic-bezier(0.42, 0.0, 0.58, 1.0) を表します。開始時は ease-in 関数に、完了時は ease-out 関数に似ています。

ease-out

アニメーションは急速に始まり、最終状態にかけて次第に緩やかになっていきます。このキーワードはタイミング関数 cubic-bezier(0.0, 0.0, 0.58, 1.0) を表します。

steps() クラスのタイミング関数

steps() 関数記法は、出力値の範囲を等間隔に区切るステップ関数を定義します。このステップ関数のサブクラスは、階段関数と呼ばれることもあります。

構文

steps(number_of_steps, direction)

ここで、

number_of_steps
厳密に正の <integer> で、ステップ関数を構成する等間隔の段数を示すものです。
direction
関数が 左連続か右連続 かを表すキーワードです。
  • jump-start は左連続関数を表し、したがってアニメーションの開始時に最初のステップが発生します。
  • jump-end は右連続関数を表し、したがってアニメーションの完了時に最後のステップが発生します。
  • jump-both は右および左の連続関数を表し、0%と100%の位置の両方で停止し、アニメーションの繰り返しの間に効果的にステップを入れます。
  • jump-none どちらの端にもジャンプしません。代わりに、それぞれ区間の 1/n ごとに0%の位置と100%の位置の両方を保持します。
  • startjump-start と同等です。
  • endjump-end と同等です。
end が既定値です。

steps( n, <direction> )

  • steps(2, jump-start)
    steps(2, start)

  • steps(4, jump-end)
    steps(4, end)

    four steps, with a jump from the fourth step to the final value at the 100% mark
  • steps(5, jump-none)

    five steps, with no jumps, so 20% of the time is at the beginning state or 0% mark and the last 20% is at the final state, or 100% mark
  • steps(3, jump-both)

steps-start
steps(1, jump-start) と同等です。
steps-end
steps(1, jump-end) と同等です。

step-start

このタイミング関数を用いると、アニメーションはすぐに最終状態へジャンプし、アニメーションの完了までその位置に居続けます。このキーワードはタイミング関数 steps(1, jump-start) または steps(1, start) を表します。

step-end

このタイミング関数を用いると、アニメーションが完了するまで初期状態で居続け、最後に最終状態へ直接ジャンプします。このキーワードはタイミング関数 steps(1, jump-end) または steps(1, end) 表します。

Examples

以下のタイミング関数は妥当です。

/* 5段階あり、最後の段階は
   アニメーションの完了直前に発生します。 */
steps(5, end)

/* 2段階の階段で、最初の段階は
   アニメーションの開始時に発生します。 */
steps(2, start)

/* 第二の引数は省略可能です。 */
steps(2)

以下のタイミング関数は不正です。

/* 最初の引数は <integer> でなければならず、
   整数と同じ値であっても実数であってはいけません。 */
steps(2.0, jump-end)

/* 段数は負の値であってはいけません。 */
steps(-3, start)

/* 段数は少なくとも 1 つ必要です。 */
steps(0, jump-none)

仕様書

仕様書 状態 備考
CSS Animations
<timing-function> の定義
草案 <single-timing-function> を CSS トランジションモジュールの <single-transition-timing-function> の別名として定義
CSS Transitions
<timing-function> の定義
草案 初回定義

ブラウザーの対応

No compatibility data found. Please contribute data for "css.types.timing-function" (depth: 2) to the MDN compatibility data repository.

関連情報