CSS Easing Functions Level 2

1.1. 値定義

【 この節の内容は、 CSS 日本語訳 共通ページに移譲。 】

2.1. 線型 easing 関数： linear, linear()

線型 easing 関数 （ linear easing function ） は、 その制御点リストを成す各制御点の合間を線形に補間する easing 関数である。 各 制御点 （ control point ）は、 2 個の実数 ( 入力, 出力 ) が成すペアであり， 入力が表現する入力進捗値を出力が表現する出力進捗値へ結び付ける。 A linear easing function is an easing function that interpolates linearly between its control points. Each control point is a pair of numbers, associating an input progress value to an output progress value.

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

<linear-easing-function>
	= linear
	| <linear()>
<linear()>
	= linear( [ <number> && <percentage>{0,2} ]# )

linear

linear(0, 1) と等価になる。 Equivalent to linear(0, 1)

linear()

線型 easing 関数を指定する。 Specifies a linear easing function.

カンマで分離された各引数は、 指定された <percentage> の個数に応じて：

• 0 個の場合 ：1 個の制御点を指定する — その入力は、 初期時は null になるが， 構文解析の後に制御点リストを正準化することにより即時に正される。

• 1 個の場合 ：1 個の制御点を指定する — その入力は、 指定された <percentage> を 0 以上 1 以下の <number> に換算した結果になる。

  【 ［ 0% ／ 100% ］が［ 0 ／ 1 ］に対応する。 構文においては値の範囲は特に制限されていないので、 0% 未満の値なども妥当になり， 0 に換算されることになる。 】

• 2 個の場合 ：2 個の制御点を — <percentage> ごとに，指定された順序で — 定義する。 それらの入力は、 前項と同様に決定される。

いずれの場合も、 制御点の出力は， 指定された <number> に等しくなる。

線型 easing 関数の 制御点リスト †は、 これらの引数により定義される制御点たちが成す 指定された順序によるリストである。

【† この用語は、 他所を明確に述べるための，この訳による追加。 】

Each comma-separated argument specifies one or two control points, with an input progress value equal to the specified <percentage> (converted to a <number> between 0 and 1), and an output progress value equal to the specified <number>. When the argument has two <percentage>s, it defines two control points in the specified order, one per <percentage>.If an argument lacks a <percentage>, its input progress value is initially empty, but that is immediately corrected by linear() canonicalization after parsing.

注記： 直列化は，入力用の値が元々給されたか否かに依拠するので、 その情報は内部表現内に維持されるべきである。 直列化は、 2 個の制御点が［ 1 個の引数にて 2 個の百分率として指定されたか，別々な引数として指定されたか ］には依拠しない。 Note: Serialization relies on whether or not an input progress value was originally supplied, so that information should be retained in the internal representation. It does not rely on whether a pair of control points were specified as two percentages on a single argument or as separate arguments.

: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);
}

2.2. 3 次ベジェ easing 関数： ease, ease-in, ease-out, ease-in-out, cubic-bezier()()

3 次ベジェ easing 関数 （ cubic Bézier easing function ）は、 easing 関数であり， 2 個の制御点により定義される［ 3 次多項式による曲線 ］を利用して 0 から 1 へ滑らかに補間する。 この曲線は、 これらの制御点に近付くが，実際には（通例的に）達しない。 （3 次ベジェの両 “端点” は、［ ( 0, 0 ) ／ ( 1, 1 ) ］に固定される。） A cubic Bézier easing function is an easing function that interpolates smoothly from 0 to 1 using a cubic polynomial, influenced by two control points that the curve will approach but (usually) not actually reach. (The "endpoints" of the cubic Bézier are fixed at (0,0) and (1,1), respectively.)

3 次ベジェ easing 関数の構文は： A cubic Bézier easing function has the following syntax:

<cubic-bezier-easing-function>
	= ease
	| ease-in
	| ease-out
	| ease-in-out
	| <cubic-bezier()>
<cubic-bezier()>
	= cubic-bezier( [ <number [0,1]>, <number> ]#{2} )

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

ease-in

関数は、 遅く滑らかに開始して，ほぼ線型な曲線で終端点へ速く近付く。

cubic-bezier(0.42, 0, 1, 1) と等価になる。 A function that starts slowly and smoothly, then quickly approaches the endpoint with an almost linear curve. Equivalent to cubic-bezier(0.42, 0, 1, 1).

ease-out

関数は、 ほぼ線型な曲線で速く開始して， 遅く滑らかに終端点へ近付く。

cubic-bezier(0, 0, 0.58, 1) と等価になる。 A function that starts quickly with an almost linear curve, then slowly and smoothly approaches the endpoint. Equivalent to cubic-bezier(0, 0, 0.58, 1).

ease-in-out

関数は、 遅く滑らかに開始して， 途中を速く辿って， 遅く滑らかに終了する。

cubic-bezier(0.42, 0, 0.58, 1) と等価になる。 A function that starts and ends slowly and smoothly, quickly traversing the middle part. Equivalent to cubic-bezier(0.42, 0, 0.58, 1).

ease

ease-in-out に類似するが、 それより速く開始して遅く完遂する。

cubic-bezier(0.25, 0.1, 0.25, 1) と等価になる。 Similar to ease-in-out, but with a quicker start and a slower finish. Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).

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

3 次ベジェ easing 関数を指定する。 引数 x1, y1 は、 制御点 P1 を指定する。 引数 x2, y2 は、 制御点 P2 を指定する。 Specifies a cubic Bézier easing function. The x1 and y1 arguments specify the P1 control point, and x2 and y2 arguments specify the P2 control point.

x1, x2 は、 どちらも範囲 [0, 1] に入らなければならない — さもなければ、 当の関数は無効になる。 Both x values must be in the range [0, 1] or the definition is invalid.

3 次ベジェ曲線についての詳細 Details on cubic Bézier curves

これは、 入力進捗値を［ 3 次ベジェ曲線をパラメタ化するためによく利用される t ］として利用する （出力として二次元な点を生産する）ことはなく， グラフの x 値として利用する （出力として y 値を生産する）ことに注意。 このことは、 問われるのは［ 曲線に沿った速度ではなく，曲線の形状に限られる ］ことを意味する。 例えば， cubic-bezier(0, 0, 0, 0) と cubic-bezier(1, 1, 1, 1) は、 正確に同じ（線型）easing を生産する — 前者の速度は［ t の 3 乗 ］曲線に従うが、 後者は［ t の ( 1 ÷ 3 ) 乗 ］曲線に従う【？】。 Note that this does not use the input progress value as the "t" value commonly used to parametrize cubic Bézier curves (producing a 2d point as the output), but rather uses it as the "x" value on the graph (producing a y value as the output). This means that only the shape of the curve matters, not the velocity along that curve. For example, cubic-bezier(0, 0, 0, 0) and cubic-bezier(1, 1, 1, 1) produce exactly the same (linear) easing, despite the first’s velocity following a t3 curve, while the second follows a t1/3 curve.

3 次ベジェ曲線は、 一般には，ループを成し得る — すなわち，同じ x 値に複数の y 値が対応し得る。 制御点に対し課される制約（ x 値は範囲 [0, 1] に入る）は，これを防止するので、 結果の easing 関数は，きちんと定義されるようになる。 In general, cubic Bézier curves can have loops: places where a single x value is associated with multiple y values. The restriction placed on the control points (that their x values be in the [0,1] range) prevent this, so the resulting easing function is well-defined.

上に挙げたキーワード値を下の例で示す： The keyword values listed above are illustrated below.

2.3. 階段 easing 関数： step-start, step-end, steps()()

階段 easing 関数 （ step easing function ） は、 入力区間 [0, 1] を指定された個数の区間に等分して， それら各区間の中では出力を一定に保つ easing 関数である。 それは、 段数 , 段位置 で定義される。 その構文は： A step easing function is an easing function that divides the input time into a specified number of intervals that are equal in length, and holds the output steady within each of those intervals. It is defined by a number of steps, and a step position. It has the following syntax:

<step-easing-function>
	= step-start
	| step-end
	| <steps()>
<steps()>
	= steps( <integer>, <step-position>? )
<step-position>
	= jump-start
	| jump-end
	| jump-none
	| jump-both
	| start
	| end

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

step-start

easing 区間の始端にて，開始時の値から終了時の値へ跳ね上がる。 Jumps from the starting to the ending value at the start of the easing interval.

steps(1, start) に算出される。 Computes to steps(1, start)

step-end

easing 区間の終端にて，開始時の値から終了時の値へ跳ね上がる。 Jumps from the starting to the ending value at the end of the easing interval.

steps(1, end) に算出される。 Computes to steps(1, end)

steps()

1 個目の引数 <integer> は、 段数を指定する。 入力区間 [0, 1] は，この段数で等分され、 各区間の中では，出力進捗値は一定になる。 出力進捗値は、 <step-position> に指定されたキーワード — 省略された場合の既定は end — に則って決定される。 Divides the input interval into a number of equal steps specified by the <integer>. Within each interval, the output progress value is constant, and is determined according to the <step-position> keyword. If omitted, the <step-position> keyword defaults to end.

<integer> は、 <step-position> に応じて［ jump-none ならば 2 以上／ 他の場合は 1 以上 ］でなければならない — さもなければ，当の関数は無効になる。 If the <step-position> is jump-none, the <integer> must be at least 2, or the function is invalid. Otherwise, the <integer> must be at least 1, or the function is invalid.

2 個目の引数 <step-position> は、 次に挙げるキーワードをとる — それは、 段位置を指定する： The <step-position> keywords are:

jump-start

最初の区間における出力進捗値は ( 1 ÷ 段数 ) になる。 The first interval has an output progress value of 1/steps,＼

区間どうしの段差は ( 1 ÷ 段数 ) になる。 and subsequent intervals rise by 1/steps.

（始端にて “跳ね上がる” 。 0 を返す段は無い。) (It "jumps at the start", with no step returning 0.)

jump-end

最初の区間における出力進捗値は 0 になる。 The first interval has an output progress value of 0,＼

区間どうしの段差は ( 1 ÷ 段数 ) になる。 and subsequent intervals rise by 1/steps.

（終端にて “跳ね上がる” 。 1 を返す段は無い。) (It "jumps at the end", with no step returning 1.)

jump-none

最初の区間における出力進捗値は 0 になる。 The first interval has an output progress value of 0,＼

区間どうしの段差は ( 1 ÷ ( 段数 − 1 ) ) になる。 and subsequent intervals rise by 1/(steps-1).

（始端, 終端にて “跳ね上がる” ことはない。 0 を返す段, 1 を返す段はどちらもある。） (It "never jumps", with steps returning both 0 and 1.)

jump-both

最初の区間における出力進捗値は ( 1 ÷ ( 段数 + 1 ) ) になる。 The first interval has an output progress value of 1/(steps+1),＼

区間どうしの段差は ( 1 ÷ ( 段数 + 1 ) ) になる。 and subsequent intervals rise by 1/(steps+1).

（始端, 終端にて “跳ね上がる” 。 0 を返す段, 1 を返す段はどちらも無い。） (It "jumps at both ends", with no steps returning 0 or 1.)

start

jump-start としてふるまう。 Behaves as jump-start.

end

jump-end としてふるまう。 Behaves as jump-end.

これらの jump-* キーワード値を以下に図示する： The jump-* keywords values are illustrated below:

2.4. 直列化

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

• 次に挙げるキーワード値は、 同じ文字列に直列化する ：ease, linear, ease-in, ease-out, ease-in-out

  これらは、 等価な［ cubic-bezier() ／ linear() ］関数には変換されない。

  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() 関数 ／ step-start ／ step-end ］は、 段位置に応じて，次の形に直列化する： 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 ／ end ならば ：steps(<integer>) If the step position is jump-end or end, serialize as steps(<integer>).
  • 他の場合は ：steps(<integer>, <step-position>) Otherwise, serialize as steps(<integer>, <step-position>).
• linear() を介して作成された線型 easing 関数 関数 は、 次の結果に直列化される ：線型 easing 関数を直列化する( 関数 ) A linear easing function created via linear() is serialized by getting its serialized computed value.