1. はじめに
このセクションは規定仕様ではありません。
値の変化速度を制御したい場面はよくあります。 例えば、要素の移動速度を徐々に上げていくことで、その要素が慣性を持って加速しているような重みを感じさせることができます。 これは直感的なユーザーインターフェース要素や、物理的な特性を持つアニメーション小道具を作る際にも役立ちます。 また、アニメーションが回転する分割ホイールのように、常に分割部分が同じ位置に現れるような、明確なステップで前進することが望ましい場合もあります。
同様に、グラデーション補間の変化速度を制御することで、凹面や凸面を示唆したり、縞模様のような視覚効果を生み出すことができます。
イージング関数は、 入力進行値を受け取り、対応する変換された出力進行値を生成することで、値の変化を変換する手段を提供します。
入力進行値が0.7の場合、イージング関数は値をスケールして出力進行値0.52を生成します。
このイージング関数をアニメーションに適用すると、最初はゆっくり、その後徐々に速く進行します。
1.1. 値の定義
この仕様では、値の定義構文を [CSS-VALUES-3] から使用します。 この仕様で定義されていない値型は CSS Values & Units [CSS-VALUES-3] で定義されています。 他のCSSモジュールとの組み合わせによって、これらの値型の定義が拡張される場合があります。
2. イージング関数
イージング関数は 入力進行値を受け取り、 出力進行値を生成します。
イージング関数は純粋関数でなければならず、同じ入力に対しては常に同じ 出力進行値を返します。
入力進行値は、[-∞, ∞] の範囲の実数です。 通常、入力進行値は [0, 1] の範囲ですが、 イージング関数を連鎖させる場合はそうでないこともあります。
イージング関数を連鎖させる例として、Web Animations [WEB-ANIMATIONS] があります。 アニメーション効果で指定したイージング関数の出力が、キーフレーム効果のキーフレームで指定したイージング関数の入力となる場合です。 この場合、キーフレーム効果のイージング関数への入力が [0, 1] の範囲外になることがあります。
出力進行値は、[-∞, ∞] の範囲の実数です。
一部のイージング関数タイプでは、追加のブール値入力 before flag を取ります（後述）。
この仕様では、以下の4種類のイージング関数の定義を示します。
イージング関数を指定するための構文は次の通りです：
2.1. 線形イージング関数: linear
線形イージング関数は恒等関数であり、 すべての入力に対し出力進行値は入力進行値と等しくなります。
線形イージング関数の構文は、単に linear キーワードです。
2.2. キュービックベジェイージング関数: ease, ease-in, ease-out, ease-in-out, cubic-bezier()
キュービックベジェイージング関数は、 イージング関数の一種であり、 4つの実数で定義されます。 これらはキュービックベジェ曲線の2つの制御点P1およびP2を指定し、始点P0と終点P3はそれぞれ(0, 0)および(1, 1)に固定されています。 P1とP2のx座標は[0, 1]の範囲に制限されます。
曲線の形状は制御点P1とP2の位置によって決まります。
入力進行値は曲線のx値となり、y値が出力進行値となります。
キュービックベジェイージング関数の構文は次の通りです （[CSS-VALUES-3]の記法を使用）：
各値の意味は以下の通りです：
- ease
-
cubic-bezier(0.25, 0.1, 0.25, 1)と同等です。
- ease-in
-
cubic-bezier(0.42, 0, 1, 1)と同等です。
- ease-out
-
cubic-bezier(0, 0, 0.58, 1)と同等です。
- ease-in-out
-
cubic-bezier(0.42, 0, 0.58, 1)と同等です。
-
- cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)
-
キュービックベジェイージング関数を指定します。 4つの数値は曲線のP1およびP2の座標（x1, y1, x2, y2）です。 両方のx値は[0, 1]の範囲でなければならず、範囲外の場合は定義が無効です。
上記のキーワード値によるイージング関数は下図の通りです。
2.2.1. キュービックベジェイージング関数の出力
入力進行値から出力進行値へのマッピングは、与えられたx値（入力進行値）に対応するy値（出力進行値）を求めることで行われます。 この曲線の評価方法は [FUND-COMP-GRAPHICS] など多くの資料で解説されています。
入力進行値が[0, 1]の範囲外の場合、曲線の端点における接線を使って無限に延長されます：
2.3. ステップイージング関数: step-start, step-end, steps()
ステップイージング関数は、イージング関数の一種で、入力時間を指定された数の等しい長さの区間に分割します。 区間数を示すstepsと、ステップ位置で定義されます。 構文は以下の通りです：
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
各値の意味は以下の通りです：
- step-start
-
steps(1, start)と同等です。
- step-end
-
steps(1, end)と同等です。
ステップイージング関数キーワード値の例。 - steps(<integer>[, <step-position> ]?)
-
1つ目のパラメーターは関数の区間数を指定します。 0より大きい正の整数でなければなりませんが、2つ目のパラメーターがjump-noneの場合は1より大きい正の整数が必要です。
2つ目のパラメーター（省略可能）は、以下の値のいずれかを使ってステップ位置を指定します：
- jump-start
-
最初の上昇は入力進行値0で発生します。
- jump-end
-
最後の上昇は入力進行値1で発生します。
- jump-none
-
すべての上昇は(0, 1)の範囲内で発生します。
- jump-both
-
最初の上昇は入力進行値0で、最後の上昇は入力進行値1で発生します。
- start
-
jump-startと同じ動作です。
- end
-
jump-endと同じ動作です。
2つ目のパラメーターを省略した場合、endが既定値となります。
これらの値は下図の通りです：
ステップイージング関数の例。
2.3.1. ステップイージング関数の出力
ステップが発生する正確な位置では、関数の結果は概念的にはステップの上端になります。ただし、追加のbefore flagが入力としてステップイージング関数に渡され、trueの場合は、その時点で関数の結果がステップの下端となります。
before flagがこの関数の挙動にどのように影響するかの例として、 ステップイージング関数のステップ位置がstartで、正の遅延とbackwards fillを持つアニメーションを考えます。
例: CSSアニメーションの場合
animation : moveRight5 s 1 s steps ( 5 , start);
遅延フェーズ中、入力進行値は0ですが、before flagがアニメーションがまだインターバルに到達していないことを示す場合、 イージング関数は出力進行値として0（つまり最初のステップの下端）を返します。
アニメーションインターバルが始まる瞬間、入力進行値は依然として0ですが、before flagはセットされず、イージング関数の結果は最初のステップの上端となります。
出力進行値の計算に関しては、ステップ位置のstartはjump-startと同等とみなします。 同様にendはjump-endと同等です。 そのため、以下のアルゴリズムではstartやendへの言及は明示的に行いません。
注意: ユーザーエージェントは、シリアライズ時（§ 2.4 シリアライズ参照）、jump-startとstartを区別する必要があります。
出力進行値は、入力進行値とbefore flagから以下のように計算します：
-
ステップ位置プロパティが以下のいずれかの場合：
current stepを1増やします。
-
以下の2つの条件が両方とも真の場合：
-
before flagがセットされている
current stepを1減らします。
-
-
入力進行値 ≥ 0 かつ current step < 0 の場合、current stepを0とします。
-
ステップ位置に基づき、jumpsを以下のように計算します：
-
入力進行値 ≤ 1 かつ current step > jumps の場合、current stepをjumpsとします。
-
出力進行値は
current step / jumpsです。
2.4. シリアライズ
イージング関数は、[CSSOM]で定義された一般的なシリアライズパターンを用い、以下の追加要件に従ってシリアライズされます：
-
キーワード値ease、linear、ease-in、ease-out、 およびease-in-outは、そのままシリアライズされ、等価なcubic-bezier()関数へ変換されません。
-
ステップイージング関数は、steps()関数、step-start、step-endキーワードで指定された場合も、以下のようにシリアライズされます：
-
ステップ位置がjump-endまたはendの場合、 steps(<integer>)としてシリアライズします。
-
それ以外の場合、steps(<integer>, <step-position>)としてシリアライズします。
-
3. プライバシーとセキュリティの考慮事項
本仕様はウェブプラットフォームに直接新しい機能を導入するものではなく、他の仕様で参照される共通定義を提供します。 そのため、新たなプライバシーやセキュリティ上の懸念事項はありません。
本仕様で定義された機能を参照する仕様は、イージング関数が通常 入力進行値を[0,1]の範囲で受け取り、 出力進行値を[0, 1]の範囲で生成することが多いですが、 必ずしも常にそうとは限らないことに注意すべきです。 イージング関数を応用する場合は、入力・出力がこの範囲外となる場合の挙動を定義し、新たなセキュリティの懸念を生じさせないようにしてください。
4. 変更点
以下は、2019年4月30日候補勧告以降の変更点です：
-
cubic-bezier()構文定義を、CSS角括弧範囲記法による範囲制限の注釈付きに更新しました。（編集上の変更）
-
イージング関数の連鎖例を追加しました。（編集上の変更）
5. 謝辞
本仕様は、L. David Baron、Dean Jackson、David Hyatt、Chris Marrinが編集したCSS Transitions仕様を基にしています。 編集者らは、Douglas Stockwell、Steve Block、Tab Atkins、Rachel Nabors、Martin Pitt、そしてAnimation at Workのslackコミュニティの皆様に、フィードバックと貢献を感謝します。