CSS Easing Functions Level 2 （日本語訳）

◎要約

この~CSS~moduleは、作者が，値の変化~率を制御する変形nを定義する仕方を述べる。 ~animationに適用された場合、そのような変形nを利用すれば，慣性などの物理的な現象を真似たり, ~robotの様にカクカク動く~animationを生産できる。この~level 2 は、 ~customな~easing曲線~用に，より洗練された関数を追加する。 ◎ This CSS module describes a way for authors to define a transformation that controls the rate of change of some value. Applied to animations, such transformations can be used to produce animations that mimic physical phenomena such as momentum or to cause the animation to move in discrete steps producing robot-like movement. Level 2 adds more sophisticated functions for custom easing curves.

~CSSisaLANG

1. 序論

◎非規範的

何らかの値の変化~率を制御したいと欲されることは多い。例えば、要素を次第に勢いが増すよう加速して動かすことで，重さがあるような感覚を与えれる。これを利用すれば、直感的な~UI要素や，物理的に本物らしく挙動する~cartoon-propsを生産できる。また、歯が常に同じ位置に現れるように回転する歯車など，飛び飛びに動く~animationが欲されることもときにはある。 ◎ It is often desirable to control the rate at which some value changes. For example, gradually increasing the speed at which an element moves can give the element a sense of weight as it appears to gather momentum. This can be used to produce intuitive user interface elements or convincing cartoon props that behave like their physical counterparts. Alternatively, it is sometimes desirable for animation to move forwards in distinct steps such as a segmented wheel that rotates such that the segments always appear in the same position.

同様に，~gradient補間の変化~率の制御を利用すれば、［面の凹凸を示唆する／縞模様の効果］など，種々の視覚的な効果を生産できる。 ◎ Similarly, controlling the rate of change of gradient interpolation can be used to produce different visual effects such as suggesting a concave or convex surface, or producing a striped effect.

`~easing関数$は、入力~進捗~値から対応する出力~進捗~値を生産することにより，そのような値を変形する手段を供する。 ◎ Easing functions provide a means to transform such values by taking an input progress value and producing a corresponding transformed output progress value.

`ease-in^v 効果を生産する~easing関数の例。この~easing関数は、入力~進捗~値 0.7 に対しては，出力~進捗 0.52 を生産する。この~easing関数を~animationに適用すれば、 ~animationは，最初は低速に, 徐々に早く進捗するようになる。 ◎ Example of an easing function that produces an ease-in effect. Given an input progress of 0.7, the easing function scales the value to produce an output progress of 0.52. Applying this easing function to an animation would cause it to progress more slowly at first but then gradually progress more quickly.

1.1. 値~定義

【この節の内容は、 `~CSS日本語訳共通~page＠~CSScommon#values$に移譲。】

2. ~easing関数

`~easing関数@ （ `easing function^en ）【 “加減速” 関数】は、 `入力~進捗~値$から`出力~進捗~値$を生産する。 ◎ An easing function takes an input progress value and produces an output progress value.

【この用語は、計時~関数（ `timing function^en ）とも称される — 特に，~animationの文脈（各種~animation関連~仕様など）においては。】

`~easing関数$は、純粋な関数でなければナラナイ — すなわち、同じ入力に対しては，常に同じ`出力~進捗~値$を生産する。 ◎ An easing function must be a pure function meaning that for a given set of inputs, it always produces the same output progress value.

`入力~進捗~値@ （ `input progress value^en ）は，範囲 [−∞, ∞] に入る実数であり、その範囲は概して [0, 1] になるが、複数の`~easing関数$が連鎖される事例ではそうなるとは限らない。 ◎ The input progress value is a real number in the range [-∞, ∞]. Typically, the input progress value is in the range [0, 1] but this may not be the case when easing functions are chained together.

注記：複数の~easing関数が連鎖される例は、 `WEB-ANIMATIONS$r において生じる。そこでは，ある`~animation効果$に指定された~easing関数の出力は、ある`~keyframe効果$【！その~animation効果である~keyframe効果？】に属するいずれかの`~keyframe$に指定された~easing関数への入力に~~渡され得る。この局面においては、そのような入力は，範囲 [0, 1] に入らないこともある。 ◎ An example of when easing functions are chained together occurs in Web Animations [WEB-ANIMATIONS] where the output of the easing function specified on an animation effect may become the input to an easing function specified on one of the keyframes of a keyframe effect. In this scenario, the input to the easing function on the keyframe effect may be outside the range [0, 1].

`出力~進捗~値@ （ `output progress value^en ）は，範囲 [−∞, ∞] に入る実数である。 ◎ The output progress value is a real number in the range [-∞, ∞].

一部の種の~easing関数は、後述する追加的な`直前~flag$も入力にとる。 ◎ Some types of easing functions also take an additional boolean before flag input which is defined subsequently.

この仕様は、以下に与える 4 種の~easing関数を定義する。 ◎ This specification defines four types of easing functions whose definitions follow.

`~easing関数$を指定するための構文は： ◎ The syntax for specifying an easing function is as follows:

`easing-function@t
	= `linear$v
	| `linear-easing-function$t
	| `cubic-bezier-easing-function$t
	| `step-easing-function$t

2.1. 線型~easing関数： `linear()$f

`線型~easing関数@ （ `linear easing function^en ）は、その`点~群$を成す各~点の合間を線形に補間する`~easing関数$である。 ◎ A linear easing function is an easing function that interpolates linearly between its points.

各 `線型~easing関数$は、 `点~群@ （ `points^en ）を有する — それは、 `線型~easing点$たちが成す`~list$であり，初期~時は空とする。 ◎ A linear easing function has points, a list of linear easing points. Initially a new empty list.

各 `線型~easing点@ （ `linear easing point^en, 略して “点” ）は、次に挙げる~itemからなる`構造体$である： ◎ A linear easing point is a struct that has:

`入力@eP （ `input^en ） ⇒ ある実数／ ~NULL ◎ input • A number or null

注記：これが ~NULL をとるのは、 `線型~easing関数を作成する$間に限られる。 ◎ Note: This is only null during create a linear easing function.
`出力@eP （ `output^en ） ⇒ ある実数 ◎ output • A number

2.1.1. 構文

`線型~easing関数$の構文は： ◎ A linear easing function has the following syntax:

`linear-easing-function@t
	= `linear@f(`linear-stop-list$t)
`linear-stop-list@t
	= [ `linear-stop$t ]#
`linear-stop@t
	= `number$t && `linear-stop-length$t?
`linear-stop-length@t
	= `percentage$t{1,2}

【 `linear-stop$t を成す `number$t は`出力~進捗~値$を表現する。 `linear-stop-length$t を成す各 `percentage$t は`入力~進捗~値$を表現する。（ `§ 構文解析-法＠#linear-easing-function-parsing$を見よ。）】

`linear()$f 関数は、次を~callすることにより`線型~easing関数$に構文解析される ⇒ `線型~easing関数を作成する$( ［引数 `linear-stop-list$t を成す各 `linear-stop$t ］たちが成す`~list$ ) ◎ linear() is parsed into a linear easing function by calling create a linear easing function, passing in its <linear-stop-list> as a list of <linear-stop>s.

2.1.2. 構文解析-法

`線型~easing関数を作成する@ ときは、所与の ( `linear-stop$t たちが成す`~list$ %~stop~list ) に対し，次を遂行する — これは［ある`線型~easing関数$／ `失敗^i ］を返す： ◎ To create a linear easing function given a list of <linear-stop>s stopList, perform the following. It returns a linear easing function or failure.

%点~群 ~LET 新たな`~list$ ◎ Let function be a new linear easing function.
%最~大な入力 ~LET 負な無限大 ◎ Let largestInput be negative infinity.
%~stop個数 ~LET %~stop~list の`~size$ ◎ ↓
~IF［ %~stop個数 ~LT 2 ］ ⇒ ~RET `失敗^i ◎ If there are less than two items in stopList, then return failure.
~EACH( %~index ~IN { 0 〜 %~stop個数 ~MINUS 1 } ) に対し：
1. %~stop ~LET %~stop~list[ %~index ]
2. %出力 ~SET %~stop を成す `number$t が表す実数
3. %入力~群 ~LET 新たな`~list$
4. ~IF［ %~stop は `linear-stop-length$t を伴う］ ⇒ %~stop の `linear-stop-length$t を成す ~EACH( `percentage$t %百分率 ) に対し ⇒ %入力~群に %百分率を実数に換算した結果【 `100%^v を 1 に換算する】を`付加する$
5. ~ELSE ⇒ %入力~群に［ %~index に応じて，次に与える値］を`付加する$ ⇒＃ 0 ならば 0 ／ %~stop個数 ~MINUS 1 ならば `max^op( 1, %最~大な入力 ) ／ ~ELSE_ ~NULL ／
6. %入力~群を成す ~EACH( %入力 ) に対し：
  1. ~IF［ %入力 ~NEQ ~NULL ］ ⇒＃ %入力 ~SET `max^op( %入力, %最~大な入力 )； %最~大な入力 ~SET %入力
  2. %点 ~LET 新たな`線型~easing点$ — その ⇒＃ `入力$eP ~SET %入力, `出力$eP ~SET %出力
  3. %点~群に %点を`付加する$
◎ For each stop in stopList: • Let point be a new linear easing point with its output set to stop’s <number> as a number. • Append point to function’s points. • If stop has a <linear-stop-length>, then: •• Set point’s input to whichever is greater: stop’s <linear-stop-length>'s first <percentage> as a number, or largestInput. •• Set largestInput to point’s input. •• If stop’s <linear-stop-length> has a second <percentage>, then: ••• Let extraPoint be a new linear easing point with its output set to stop’s <number> as a number. ••• Append extraPoint to function’s points. ••• Set extraPoint’s input to whichever is greater: stop’s <linear-stop-length>'s second <percentage> as a number, or largestInput. ••• Set largestInput to extraPoint’s input. • Otherwise, if stop is the first item in stopList, then: •• Set point’s input to 0. •• Set largestInput to 0. • Otherwise, if stop is the last item in stopList, then set point’s input to whichever is greater: 1 or largestInput.
【この段は、 `入力$ePが ~NULL をとる点たちが成す連列に対し，前後の点の`入力$ePから線形に補間した結果をアテガう。原文の記述は，ここで述べた様な短いものだが、この訳では，それを詳細な形にして述べる。】
1. %~NULL連列~群 ~LET 新たな`~list$
  
  この~listを成す各~itemは、 ( `始端^i, `終端^i, `点~列^i ) が成す`~tuple$を与える。 `点~列^i は %点~群内で連続する［ `入力$ePが ~NULL をとる点たち］が成す~listを与える。［ `始端^i ／ `終端^i ］は %点~群内で点たちの［直前／直後］にある点の`入力$ePを与える。
2. %現在の~NULL連列 ~LET ~NULL
3. %点~群を成す ~EACH( %点 ) に対し：
  1. %入力 ~LET %点の`入力$eP
  2. ~IF［ %入力 ~EQ ~NULL ］ ⇒＃ %現在の~NULL連列の `点~列^i に %点を付加する； ~CONTINUE
  3. ~IF［ %現在の~NULL連列 ~NEQ ~NULL ］：
    1. %現在の~NULL連列の `終端^i ~SET %入力
    2. %~NULL連列~群に %現在の~NULL連列を付加する
    3. %現在の~NULL連列 ~SET ~NULL
  4. ~ELSE ⇒ %現在の~NULL連列 ~SET `~tuple$( %入力, ~NULL, 新たな~list )
4. %~NULL連列~群を成す ~EACH( %~NULL連列 ) に対し：
  1. ( %始端, %終端, %点~列 ) ~LET %~NULL連列の ( `始端^i, `終端^i, `点~列^i )
  2. %~size ~LET %点~列の`~size$
  3. %間隔 ~LET ( %終端 ~MINUS %始端 ) ~DIV ( %~size ~PLUS 1 )
  4. ~EACH( %~index ~IN { 0 〜 %~size ~MINUS 1 } に対し ⇒ %点~列[ %~index ] の`入力$eP ~SET %始端 ~PLUS ( %~index ~PLUS 1 ) ~MUL %間隔
◎ For runs of items in function’s points that have a null input, assign a number to the input by linearly interpolating between the closest previous and next points that have a non-null input.
~RET 新たな`線型~easing関数$ — その ⇒ `点~群$ ~SET %点~群 ◎ Return function.

2.1.3. 直列化-法

注記： `linear()$f の直列化は、各~点の`入力$ePを含む — 入力~値がその直前にある点の`入力$eP未満になることは、決してない。 ◎ The serialization of linear() includes input values for each point, and input values are never less than the input of the previous point.

様々な `linear()$f 関数の直列化
入力	直列化した結果
`linear(0, 0.25, 1)^v	`linear(0 0%, 0.25 50%, 1 100%)^v
`linear(0 20%, 0.5 10%, 1)^v	`linear(0 20%, 0.5 20%, 1 100%)^v
`linear(0, 0.25 25% 75%, 1)^v	`linear(0 0%, 0.25 25%, 0.25 75%, 1 100%)^v

◎ For example: • linear(0, 0.25, 1) serializes as linear(0 0%, 0.25 50%, 1 100%) • linear(0 20%, 0.5 10%, 1) serializes as linear(0 20%, 0.5 20%, 1 100%) • linear(0, 0.25 25% 75%, 1) serializes as linear(0 0%, 0.25 25%, 0.25 75%, 1 100%)

`線型~easing関数の算出d値を直列化する@ ときは、所与の ( `線型~easing関数$ %線型~easing関数 ) に対し，次を遂行する — これは`文字列$を返す：

%引数~群 ~LET 新たな`~list$
%線型~easing関数の`点~群$ を成す ~EACH( %点 ) に対し：
1. %出力 ~LET %点の`出力$eP【！の算出d値】を `number$t で表す文字列
2. %入力 ~LET %点の`入力$eP【！の算出d値】を `percentage$t で表す文字列
3. %引数~群に次の結果を`付加する$ ⇒ « %出力, %入力 » を `, ^l で`連結する$ ⇒＃
%引数~文字列 ~LET %引数~群を `, ^l で`連結する$
~RET « `linear(^l, %引数~文字列, `)^l » を`連結する$

◎ To get a linear easing function's (linearEasingFunction) serialized computed value, perform the following. It returns a string. • Let output be "linear(". • For each point in linearEasingFunction’s points: •• If point is not the first item of linearEasingFunction’s points, append ", " to output. •• Append the computed value of point’s output, as a <number>, to output. •• Append " " to output. •• Append the computed value of point’s input, as a <percentage>, to output. • Append ")" to output. • Return output.

2.1.4. 線型~easing関数の出力

`線型~easing出力~進捗を計算する@ ときは、所与の ( `線型~easing関数$ %線型~easing関数, `入力~進捗~値$ %入力~進捗 ) に対し，次を遂行する — これは、 `出力~進捗~値$を返す： ◎ To calculate linear easing output progress for a given linear easing function linearEasingFunction, and an input progress value inputProgress, perform the following. It returns an output progress value.

%点~群 ~LET %線型~easing関数の`点~群$ ◎ Let points be linearEasingFunction’s points.
~Assert： %点~群の`~size$ ~GTE 2 ◎ ↓
%始~点 ~SET %点~群[ 0 ] ◎ ↓
%終~点 ~SET %点~群[ 1 ] ◎ ↓
%直後の点 ~LET ε ◎ ↓
%点~群を成す ~EACH( %点 ) に対し，逆順に：
1. ~IF［ %点の`入力$eP ~LTE %入力~進捗］~AND［ %直後の点 ~NEQ ε ］ ⇒＃ %始~点 ~SET %点； %終~点 ~SET %直後の点； ~BREAK
2. %直後の点 ~SET %点
◎ Let pointAIndex be index of the last item in points with an input less than or equal to inputProgress, or 0 if there is no match. ◎ If pointAIndex is equal to points size minus 1, decrement pointAIndex by 1. ◎ Note: This ensures we have a "next" point to compare to. ◎ Let pointA be points[pointAIndex]. ◎ Let pointB be points[pointAIndex + 1].
~IF［ %始~点の`入力$eP ~EQ %終~点の`入力$eP ］ ⇒ ~RET %終~点の`出力$eP ◎ If pointA’s input is equal to pointB’s input, return pointB’s output.
~RET %始~点の`出力$eP ~PLUS 次の結果 ⇒ ( ( %入力~進捗 ~MINUS %始~点の`入力$eP ) ~DIV ( %終~点の`入力$eP ~MINUS %始~点の`入力$eP ) ) ~MUL ( %終~点の`出力$eP ~MINUS %始~点の`出力$eP ) ◎ Let progressFromPointA be inputProgress minus pointA’s input. ◎ Let pointInputRange be pointB’s input minus pointA’s input. ◎ Let progressBetweenPoints be progressFromPointA divided by pointInputRange. ◎ Let pointOutputRange be pointB’s output minus pointA’s output. ◎ Let outputFromLastPoint be progressBetweenPoints multiplied by pointOutputRange. ◎ Return pointA’s output plus outputFromLastPoint.

2.1.5. 例

`linear()$f 関数は、各~点の合間を線形に補間する`~easing関数$の定義を許容する。 ◎ linear() allows the definition of easing functions that interpolate linearly between a set of points.

例えば， `linear(0, 0.25, 1)^v は、まず 0 から 0.25 へ，そこから 1 へ線形に移動する~easing関数を生産する： ◎ For example, linear(0, 0.25, 1) produces an easing function that moves linearly from 0, to 0.25, then to 1:

既定では、明示的な “入力” を伴わない値は，両側の~entryの合間に均等に~~分布する。入力~値は `percentage$t を利用して供せる。 ◎ By default, values are spread evenly between entries that don’t have an explicit "input". Input values can be provided using a <percentage>.

例えば， `linear(0, 0.25 75%, 1)^v が生産する~easing関数は、 75% の時間を費やして `0^v から `.25^v まで遷移してから，残り 25% を費やして `.25^v から `1^v まで遷移する： ◎ For example, linear(0, 0.25 75%, 1) produces the following easing function, which spends 75% of the time transitioning from 0 to .25, then the last 25% transitioning from .25 to 1:

1 個の出力~用に 2 個の入力~値が供された場合、その結果は，同じ出力を伴う 2 個の点になる。 ◎ If two input values are provided for a single output, it results in two points with the same output.

例えば， `linear(0, 0.25 25% 75%, 1)^v は、 `linear(0, 0.25 25%, 0.25 75%, 1)^v と等価になり，次のような~easing関数を生産する： ◎ For example, linear(0, 0.25 25% 75%, 1) is equivalent to linear(0, 0.25 25%, 0.25 75%, 1), producing the following easing function:

【補間-時に】供された入力が【 0 以上 1 以下の】範囲に入らない場合、最も近い 2 個の点を結ぶ軌道が継続される。 ◎ If the input is outside the range provided, the trajectory of the nearest two points is continued.

例えば、前の例と同じ関数における暗黙的な値【図の破線】は： ◎ For example, here are the implicit values from the previous function:

`linear()$f の代表的な利用は、多数の点を供して曲線のように見せかけることである。 ◎ A typical use of linear() is to provide many points to create the illusion of a curve.

例えば、 `linear()$f を利用して，再利用-可能な “跳返り（ `--bounce^p ）” ~easing関数を作成することもできる： ◎ For example, here’s how linear() could be used to create a reusable "bounce" easing function:

:root {
  --bounce: linear(
    /* 
始端から 1 個目までの跳返り
◎
Start to 1st bounce
 */
    0, 0.063, 0.25, 0.563, 1 36.4%,
    /* 
1 個目から 2 個目までの跳返り
◎
1st to 2nd bounce
 */
    0.812, 0.75, 0.813, 1 72.7%,
    /* 
2 個目から 3 個目までの跳返り
◎
2nd to 3rd bounce
 */
    0.953, 0.938, 0.953, 1 90.9%,
    /* 
3 個目から終端までの跳返り
◎
3rd bounce to end
 */
    0.984, 1 100% 100%
  );
}

.example {
  animation-timing-function: var(--bounce);
}

この定義は、 `1 100% 100%^v で終端するので，末尾に 2 個の点を作成する — その結果、 1 を超える入力に対する出力は，常に 1 になる ◎ The definition ends 1 100% 100% to create two final points, so inputs greater than 1 always output 1.

より遅い~animationには，もっと滑らかな結果が必要になろうが、利用する点を~~増やすことで作成できる。 ◎ More points could be used to create a smoother result, which may be needed for slower animations.

2.2. 線型~easing~keyword： `linear$v

`linear@v ~keywordは、 `線型~easing関数$を生産する — それは、 `linear(0, 1)^v から生産されるものと同じになる（その`点~群$は、 2 個の`線型~easing点$ — ( `入力$eP, `出力$eP ) が［ ( 0, 0 ) をとるもの, ( 1, 1 ) をとるもの］ — からなる）。 ◎ The linear keyword produces a linear easing function with two points: ◎ input • 0 ◎ output • 0 ◎ input • 1 ◎ output • 1

注記：その結果は、恒等~関数になる — すなわち、どの入力に対しても，`出力~進捗~値$は`入力~進捗~値$と等しくなる。 ◎ Note: This results in an identity function, meaning that its output progress value is equal to the input progress value for all inputs.

注記： ~keyword `linear$v を利用した場合、常にそのまま `linear^v に直列化される。一方で，等価な関数 `linear(0, 1)^v は、 `linear(0 0%, 1 100%)^v として直列化される。これらの規則は、 `§ 直列化＠#serialization$を見よ。 ◎ Note: Although this produces a linear easing function, uses of the keyword linear always serialize as-is, to linear. Whereas the function equivalent linear(0, 1) will serialize to linear(0 0%, 1 100%). These rules are in Serialization.

2.3. ~cubic~Bezier~easing関数： `ease^v, `ease-in^v, `ease-out^v, `ease-in-out^v, `cubic-bezier()^f

`~cubic~Bezier~easing関数@ （ `cubic Bézier easing function^en ）は、 `~easing関数$の一種であり，~cubic~Bezier曲線の 2 個の制御点 %P1, %P2 を指定する 4 個の実数で定義される。曲線の端点 %P0, %P3 は、順に固定的な点 ( 0, 0 ), ( 1, 1 ) で与えられる。 %P1, %P2 の~x座標は、範囲 [0, 1] に制約される。 ◎ A cubic Bézier easing function is a type of easing function defined by four real numbers that specify the two control points, P1 and P2, of a cubic Bézier curve whose end points P0 and P3 are fixed at (0, 0) and (1, 1) respectively. The x coordinates of P1 and P2 are restricted to the range [0, 1].

~easing関数として利用される~cubic~Bezier曲線。曲線の形状は、制御点 %P1, %P2 の所在により決定される。［入力~進捗~値／出力~進捗~値］は、曲線の［ %x 値／ %y 値］として~serveする。 ◎ A cubic Bézier curve used as an easing function. The shape of the curve is determined by the location of the control points P1 and P2. Input progress values serve as x values of the curve, whilst the y values are the output progress values.

`~cubic~Bezier~easing関数$の構文は、次で与えられる（ `CSS-VALUES-3$r による記法を利用して）： ◎ A cubic Bézier easing function has the following syntax (using notation from [CSS-VALUES-3]):

`cubic-bezier-easing-function@t
    = `ease$v
    | `ease-in$v
    | `ease-out$v
    | `ease-in-out$v
    | `cubic-bezier$f(`number [0,1]$t, `number$t, `number [0,1]$t, `number$t)

各種値の意味は： ◎ The meaning of each value is as follows:

`ease@v: `cubic-bezier(0.25, 0.1, 0.25, 1)^v に等価。 ◎ Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
`ease-in@v: `cubic-bezier(0.42, 0, 1, 1)^v に等価。 ◎ Equivalent to cubic-bezier(0.42, 0, 1, 1).
`ease-out@v: `cubic-bezier(0, 0, 0.58, 1)^v に等価。 ◎ Equivalent to cubic-bezier(0, 0, 0.58, 1).
`ease-in-out@v: `cubic-bezier(0.42, 0, 0.58, 1)^v に等価。 ◎ Equivalent to cubic-bezier(0.42, 0, 0.58, 1).
`cubic-bezier@f(`number [0,1]$t, `number$t, `number [0,1]$t, `number$t): `~cubic~Bezier~easing関数$を指定する。 4 個の実数は、順に ( %x1, %y1, %x2, %y2 ) として，曲線の点 %P1, %P2 を指定する。［ %x1, %x2 ］は、範囲 [0, 1] に入っていなければナラナイ — さもなければ定義は無効になる。 ◎ Specifies a cubic Bézier easing function. The four numbers specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid.

上に挙げた~keyword値を下の例で示す： ◎ The keyword values listed above are illustrated below.

各 ~cubic~Bezier~easing関数~keyword値により生産される，~easing関数。 ◎ The easing functions produced by each of the cubic Bézier easing function keyword values.

2.3.1. ~cubic~Bezier~easing関数の出力

入力~進捗から出力~進捗への対応付けは、所与の`入力~進捗~値$ %x に対し，対応する`出力~進捗~値$ %y を決定することにより遂行される。この曲線の評価法は、 `FUND-COMP-GRAPHICS$r などの多くの資料で~~論じられている。 ◎ The mapping from input progress to output progress is performed by determining the corresponding y value (output progress value) for a given x value (input progress value). The evaluation of this curve is covered in many sources such as [FUND-COMP-GRAPHICS].

範囲 [0, 1] に入らない`入力~進捗~値$に対しては、曲線は，次に従って得られる［曲線の端点のうち近い方における接線］を利用して無限に伸ばされる： ◎ For input progress values outside the range [0, 1], the curve is extended infinitely using tangent of the curve at the closest endpoint as follows:

0 未満の`入力~進捗~値$に対しては： ◎ For input progress values less than zero,
1. %P1 の~x座標 ~GT 0 ならば： %P1, %P0 を通る直線を接線に利用する。 ◎ If the x value of P1 is greater than zero, use a straight line that passes through P1 and P0 as the tangent.
2. 他の場合， %P2 の~x座標 ~GT 0 ならば： %P2, %P0 を通る直線を接線に利用する。 ◎ Otherwise, if the x value of P2 is greater than zero, use a straight line that passes through P2 and P0 as the tangent.
3. 他の場合、範囲 [−∞, 0) 内のすべての`入力~進捗~値$に対し，`出力~進捗~値$は 0 になる。 ◎ Otherwise, let the output progress value be zero for all input progress values in the range [-∞, 0).
1 を超える`入力~進捗~値$に対しては： ◎ For input progress values greater than one,
1. %P2 の~x座標 ~LT 1 ならば： %P2, %P3 を通る直線を接線に利用する。 ◎ If the x value of P2 is less than one, use a straight line that passes through P2 and P3 as the tangent.
2. 他の場合， %P1 の~x座標 ~LT 1 ならば： %P1, %P3 を通る直線を接線に利用する ◎ Otherwise, if the x value of P1 is less than one, use a straight line that passes through P1 and P3 as the tangent.
3. 他の場合、範囲 (1, ∞] 内のすべての`入力~進捗~値$に対し，`出力~進捗~値$は 1 とする。 ◎ Otherwise, let the output progress value be one for all input progress values in the range (1, ∞].

2.4. 階段~easing関数： `step-start^v, `step-end^v, `steps()^f

`階段~easing関数@ （ `step easing function^en ）は、 `~easing関数$の一種であり，入力~時間軸を指定された個数の時区間に等分する。それは［ `段数$, `段~位置$ ］で定義される。その構文は： ◎ A step easing function is a type of easing function that divides the input time into a specified number of intervals that are equal in length. It is defined by a number of steps, and a step position. It has following syntax:

`step-easing-function@t
    = `step-start$v
    | `step-end$v
    | `steps$f(`integer$t, `step-position$t?)
`step-position@t
    = `jump-start$v
    | `jump-end$v
    | `jump-none$v
    | `jump-both$v
    | `start$v
    | `end$v

各種値の意味は： ◎ The meaning of each value is as follows:

`step-start@v

`steps(1, start)^v に算出される。 ◎ Computes to steps(1, start)

`step-end@v

`steps(1, end)^v に算出される。 ◎ Computes to steps(1, end)

階段~easing関数の各種~keyword値の例。 ◎ Example step easing function keyword values.

`steps@f(`integer$t, `step-position$t?)

1 個目の~parameterは、 `段数@ （ `steps^en ）を与え，関数における時区間の個数を指定する。値は［ 2 個目の~parameterが `jump-none$v の場合は 2 以上／ ~ELSE_ 1 以上］の整数でなければナラナイ。 ◎ The first parameter specifies the number of intervals in the function. It must be a positive integer greater than 0 unless the second parameter is jump-none in which case it must be a positive integer greater than 1.

省略可能な 2 個目の~parameterは、次に挙げるいずれかの値を利用して `段~位置@ （ `step position^en ）を指定する — それは、 `入力~進捗~値$［ 0 の所, 1 の所］で “段差” （出力~進捗~値の変化）が生じるかどうかを定義する： ◎ The second parameter, which is optional, specifies the step position using one of the following values:

`jump-start@v: `入力~進捗~値$［ 0 ／ 1 ］の所で段差は［生じる／生じない］。 ◎ The first rise occurs at input progress value of 0.
`jump-end@v: `入力~進捗~値$［ 0 ／ 1 ］の所で段差は［生じない／生じる］。 ◎ The last rise occurs at input progress value of 1.
`jump-none@v: `入力~進捗~値$［ 0 ／ 1 ］の所で段差は生じる。 ◎ All rises occur within the range (0, 1).
`jump-both@v: `入力~進捗~値$［ 0 ／ 1 ］の所で段差は生じない。 ◎ The first rise occurs at input progress value of 0 and the last rise occurs at input progress value of 1.
`start@v: `jump-start$v として挙動する。 ◎ Behaves as jump-start.
`end@v: `jump-end$v として挙動する。 ◎ Behaves as jump-end.

2 個目の~parameterが省略された場合、 `end$v と見做される。 ◎ If the second parameter is omitted, the value end is assumed.

これらの値を下に図示する： ◎ These values are illustrated below:

階段~easing関数の例。 ◎ Example step easing functions.

2.4.1. 階段~easing関数の出力

段の境目における`階段~easing関数$の結果は，概念的には境目の直後の段に対応するが、入力として追加的な `直前~flag@ （ `before flag^en ）が ~T にされて渡された場合の結果は，境目の直前の段に対応する。【詳細は、 `WEB-ANIMATIONS$r `§ 変形-済み進捗の計算-法＠~WANIM#calculating-the-transformed-progress$を見よ。】 ◎ At the exact point where a step occurs, the result of the function is conceptually the top of the step. However, an additional before flag passed as input to the step easing function, if true, will cause the result of the function to correspond to the bottom of the step at the step point.

`直前~flag$がこの関数の挙動にどう影響するかの例として、次のようにされた~animationを考える：

`段~位置$は `start$v にされた`階段~easing関数$を利用する
`animation-fill-mode$p は `backwards^v
`animation-delay$p は正な値

◎ As an example of how the before flag affects the behavior of this function, consider an animation with a step easing function whose step position is start and which has a positive delay and backwards fill.

例えば、次の~CSS~animationを利用した場合： ◎ For example, using CSS animation:

animation: moveRight 5s 1s steps(5, start);

遅延~相における`入力~進捗~値$は 0 になるが、 ~animation時区間にまだ達していないことを指示するため， `直前~flag$は ~T にされ、 ~easing関数が生産する`出力~進捗~値$は，最初の境目の直前に対応する 0 になる。 ◎ During the delay phase, the input progress value will be zero but if the before flag is set to indicate that the animation has yet to reach its animation interval, the easing function will produce zero as its output progress value, i.e. the bottom of the first step.

~animationの時区間が始まる正確な瞬間における`入力~進捗~値$も，依然として 0 になるが、 `直前~flag$は ~F にされるので， ~easing関数の結果は最初の境目の直後に対応することになる。 ◎ At the exact moment when the animation interval begins, the input progress value will still be zero, but the before flag will not be set and hence the result of the easing function will correspond to the top of the first step.

下に与える~algoに見られるように，`出力~進捗~値$を計算する目的においては、 `段~位置$［ `start$v は `jump-start$v と等価／ `end$v は `jump-end$v と等価］と見なされる。 ◎ For the purposes of calculating the output progress value, the step position start is considered equivalent to jump-start. Likewise end is considered equivalent to jump-end. As a result, the following algorithm does not make explicit reference to start or end.

注記：それでも，~UAは、直列化の目的においては［ `jump-start$v, `start$v ］に対する結果を異ならせるモノトスル（ `§ 直列化＠#serialization$ を見よ）。 ◎ Note: User agents must still differentiate between jump-start and start for the purpose of serialization (see § 2.5 Serialization).

`出力~進捗~値$は、所与の ( `入力~進捗~値$, `直前~flag$ ) から，次に従って計算される： ◎ The output progress value is calculated from the input progress value and before flag as follows:

%段~位置 ~LET `段~位置$に応じて ⇒＃ `start$v ならば `jump-start$v ／ `end$v ならば `jump-end$v ／ ~ELSE_ `段~位置$ ◎ ↑
%現在の段 ~LET ( `入力~進捗~値$ ~MUL `段数$ ) を超えない最~大な整数 ◎ Calculate the current step as floor(input progress value × steps).
~IF［ %段~位置 ~IN { `jump-start$v, `jump-both$v } ］ ⇒ %現在の段 ~INCBY 1 ◎ If the step position property is one of: • jump-start, • jump-both, ◎ increment current step by one.
~IF［ `直前~flag$ ~EQ ~T ］~AND［ ( `入力~進捗~値$ ~MUL `段数$ ) は整数である］ ⇒ %現在の段 ~DECBY 1 ◎ If both of the following conditions are true: • the before flag is set, and • input progress value × steps mod 1 equals zero (that is, if input progress value × steps is integral), then ◎ decrement current step by one.
~IF［ `入力~進捗~値$ ~GTE 0 ］~AND［ %現在の段 ~LT 0 ］ ⇒ %現在の段 ~SET 0 ◎ If input progress value ≥ 0 and current step < 0, let current step be zero.
%段差数 ~LET %段~位置に応じて ⇒＃ `jump-start$v または `jump-end$v ならば`段数$ ／ `jump-none$v ならば`段数$ ~MINUS 1 ／ `jump-both$v ならば`段数$ ~PLUS 1 ／ ◎ Calculate jumps based on the step position as follows: • jump-start or jump-end •• steps • jump-none •• steps - 1 • jump-both •• steps + 1
~IF［ `入力~進捗~値$ ~LTE 1 ］~AND［ %現在の段 ~GT %段差数］ ⇒ %現在の段 ~LET %段差数 ◎ If input progress value ≤ 1 and current step > jumps, let current step be jumps.

注記：この段と 2 つ前の段は、所与の［範囲 [0, 1] に入る`入力~進捗~値$ ］に対し，階段~easing関数が［範囲 [0, 1] に入らない`出力~進捗~値$ ］を生産しないこと確保する。 ◎ Steps 4 and 6 in this procedure ensure that given an input progress value in the range [0, 1], a step easing function does not produce an output progress value outside that range.

例えば，`段~位置$が `jump-start$v にされた階段~easing関数は、数学的には［ `入力~進捗~値$ ~EQ 1 ］のときにも境目の直後の段に上がる（すなわち 1 を超える）と直感的に期待できようが、そのような~easing関数は，~animationが前方へ延伸するとき（ `animation-fill-mode$p は `forwards^v ）には、 `出力~進捗~値$として 1 を生産することが期待される。 ◎ For example, although mathematically we might expect that a step easing function with a step position of jump-start would step up (i.e. beyond 1) when the input progress value is 1, intuitively, when we apply such an easing function to a forwards-filling animation, we expect it to produce an output progress value of 1 as the animation fills forwards.

類似な状況は、［ `段~位置$が `jump-end$v にされた階段~easing関数］が~animationの遅延~相（ `animation-delay$p ）に適用されたときにも生じる。 ◎ A similar situation arises for a step easing function with a step position of jump-end when applied to an animation during its delay phase.
~RET %現在の段 ~DIV %段差数 ◎ The output progress value is current step / jumps.

2.5. 直列化

~easing関数は、 `CSSOM$r に定義される共通な直列化~patternに加えて，次の追加的な要件を利用して直列化される： ◎ Easing functions are serialized using the common serialization patterns defined in [CSSOM] with the following additional requirements:

次に挙げる~keyword値は、同じ文字列に直列化する ⇒＃ `ease$v, `linear$v, `ease-in$v, `ease-out$v, `ease-in-out$v

これらは、等価な［ `cubic-bezier()$f ／ `linear()$f ］関数には変換されない。
◎ The keyword values ease, linear, ease-in, ease-out, and ease-in-out are serialized as-is, that is, they are not converted to the equivalent cubic-bezier() or linear() function before serializing.
階段~easing関数［ `steps()$f 関数／ `step-start$v ／ `step-end$v ］は、 `段~位置$に応じて，次の形に直列化する： ◎ Step easing functions, whether they are specified using the steps() function or either of the step-start or step-end keywords, are serialized as follows:
- `jump-end$v ／ `end$v ならば ⇒ `steps$f(`integer$t) ◎ If the step position is jump-end or end, serialize as steps(<integer>).
- ~ELSE_ ⇒ `steps$f(`integer$t, `step-position$t) ◎ Otherwise, serialize as steps(<integer>, <step-position>).
`linear()$f を介して作成された`線型~easing関数$は、次の結果に直列化される ⇒ `線型~easing関数の算出d値を直列化する$( 当の関数 ) ◎ A linear easing function created via linear() is serialized by getting its serialized computed value.

3. ~privacy／~securityの考慮点

この仕様は、他の仕様から参照できる共通な定義を供するものであり， ~Web~platformに新たな能力を直に導入することはないので、［ ~privacy／~security ］の新たな懸念を導入するものではない。 ◎ This specification does not directly introduce any new capabilities to the Web platform but rather provides common definitions that may be referenced by other specifications. As a result, it does not introduce any new privacy and security concerns.

~easing関数は、［大概は，範囲 [0, 1] に入る`入力~進捗~値$をとり，範囲 [0, 1] に入る`出力~進捗~値$を生産する］が，常にそうなるとは限らない。この仕様に定義される特能を参照している仕様は、それを考慮するベキである — ~easing関数の応用は、入力や出力がこの範囲に入らないときの挙動を定義して，新たな~security考慮点を導入しないことを確保するベキである。 ◎ Specifications referencing the features defined in this specification should consider that while easing functions most commonly take an input progress value in the range [0,1] and produce an output progress value in the range [0, 1], this is not always the case. Applications of easing functions should define the behavior for inputs and outputs outside this range to ensure they do not introduce new security considerations.

変更点

~level 1 からの追加 ◎ 4.1. Additions Since Level 1: `linear()$f 関数を追加した。 ◎ Added linear() function.

謝辞

この仕様は、次に挙げる各氏により編集された `CSS Transitions＠~TRANSITION$ 仕様に基づいている ⇒ `L. David Baron, Dean Jackson, David Hyatt, Chris Marrin^en ◎ This specification is based on the CSS Transitions specification edited by L. David Baron, Dean Jackson, David Hyatt, and Chris Marrin.＼

次に挙げる方々からの~feedbackと貢献にも感謝する： ◎ The editors would also like to thank＼ … for their feedback and contributions.

Douglas Stockwell, Steve Block, Tab Atkins, Rachel Nabors, Martin Pitt, `Animation at Work＠https://damp-lake-50659.herokuapp.com/$ slack scommunity