CSS Timing Functions Level 1 （日本語訳）

要約

この~CSS~moduleは、作者が，~animationの時間次元に適用される変形を定義する仕方を述べる。これを利用すれば、慣性などの物理的な現象を模倣したり, ~robotの様にカクカク動く~animationを生産できる。 ◎ This CSS module describes a way for authors to define a transformation to be applied to the time of an animation. This 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.

~CSSisaLANG

1. 序論

~INFORMATIVE

~animationの進捗~率を制御したいと欲されることは多い。例えば、動きが加速され，次第に勢いが増す要素には、重さがあるような感覚を与えれる。これを用いれば、利用者に直感的な~UI要素や，物理的に本物らしく挙動する~cartoon-propsを生産できる。また、歯が常に同じ位置に現れるように回転する歯車など，飛び飛びに動く~animationが欲されることもときにはある。 ◎ It is often desirable to control the rate at which an animation progresses. 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 user intuitive 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.

`計時~関数$は、入力~進捗~値から対応する出力~進捗~値を生産することにより，~animationの時間次元を変形する手段を供する。 ◎ Timing functions provide a means to transform animation time by taking an input progress value and producing a corresponding transformed output progress value.

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

2. 計時~関数

`計時~関数@ （ `timing function^en ）は、`入力~進捗~値$から`出力~進捗~値$を生産する。 ◎ A timing function takes an input progress value and produces an output progress value.

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

`入力~進捗~値@ は，範囲 [-∞, ∞] に入る実数であり。その範囲は概して [0, 1] になるが、複数の`計時~関数$が連鎖される事例ではそうなるとは限らない。 ◎ 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 timing functions are chained together.

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

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

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

`計時~関数$を指定するための構文は、次に従う： ◎ The syntax for specifying a timing function is as follows:

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

2.1. 線型~計時~関数： `linear$v

`線型~計時~関数@ は、恒等~関数である — すなわち、どの入力に対しても，`入力~進捗~値$と`出力~進捗~値$は等しくなる。 ◎ The linear timing function is an identity function meaning that its output progress value is equal to the input progress value for all inputs.

`線型~計時~関数$の構文は、単に `linear@v ~keywordである。 ◎ The syntax for the linear timing function is simply the linear keyword.

2.2. ~cubic~Bezier計時~関数： `ease$v, `ease-in$v, `ease-out$v, `ease-in-out$v, `cubic-bezier()$f

`~cubic~Bezier計時~関数@ は、`計時~関数$の一種であり，~cubic~Bezier曲線の 2 個の制御点 %P1, %P2 を指定する 4 個の実数で定義される。曲線の端点 %P0, %P3 は、順に固定的な点 ( 0, 0 ), ( 1, 1 ) で与えられる。 %P1, %P2 の %x 座標は、範囲 [0, 1] に制約される。 ◎ A cubic Bézier timing function is a type of timing 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].

入力~進捗から出力~進捗への対応付けは、所与の`入力~進捗~値$ %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].

A cubic Bezier curve used as a timing function. — 計時~関数として利用される~cubic~Bezier曲線。曲線の形状は、制御点 %P1, %P2 の所在により決定される。入力~進捗~値／出力~進捗~値は、曲線の %x 値／ %y 値として~~働く。 ◎ A cubic Bézier curve used as a timing 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.

範囲 [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, ∞].

`~cubic~Bezier計時~関数$は、次の構文による文字列として指定できる（ `CSS3VAL$r による記法を用いる）： ◎ A cubic Bézier timing function may be specified as a string using the following syntax (using notation from [CSS3VAL]):

`cubic-bezier-timing-function@t
    = `ease$v
    | `ease-in$v
    | `ease-out$v
    | `ease-in-out$v
    | `cubic-bezier$f(`number$t, `number$t, `number$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$t, `number$t, `number$t, `number$t): `~cubic~Bezier計時~関数$を指定する。 4 個の実数は、順に ( %x1, %y1, %x2, %y2 ) として、曲線の点 %P1, %P2 を指定する。 %x1, %x2 とも範囲 [0, 1] に入ってい~MUST — さもなければ定義は無効になる。 ◎ Specifies a cubic Bézier timing 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.

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

2.3. 階段~計時~関数： `step-start$v, `step-end$v, `steps()$f

`階段~計時~関数@ は、`計時~関数$の一種であり，入力~時間軸を指定された個数の時区間に等分する。 ◎ A step timing function is a type of timing function that divides the input time into a specified number of intervals that are equal in length.

階段~計時~関数を下の例で示す： ◎ Some example step timing functions are illustrated below.

`階段~計時~関数$は、次の~parameterで定義される：

`段数@: 正~整数。
`段~位置@: `start$v または `end$v 。
`直前~flag@: 省略時は ~OFF 。段の境目における関数の結果は，概念的には境目の直後の段に対応するが、この~flagが ~ON にされて渡された場合の結果は，境目の直前の段に対応する。

◎ A step timing function is defined by a non-zero positive number of steps, and a step position property that may be either start or end. ◎ 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 timing function, if true, will cause the result of the function to correspond to the bottom of the step at the step point.

`出力~進捗~値$は、これらの~parameterから次に従って計算した結果で与えられる： ◎ The output progress value is calculated from the input progress value and before flag as follows:

%V ~LET `入力~進捗~値$ × `段数$ ◎ ↓
%段 ~LET floor( %V ) ◎ Calculate the current step as floor(input progress value × steps).
~IF［ `段~位置$ ~EQ `start$v ］ ⇒ %段 ~INCBY 1 ◎ If the step position property is start, increment current step by one.
~IF［ `直前~flag$ ~EQ ~ON ］~AND［ %V は整数である］ ⇒ %段 ~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.
%出力~進捗~値 ~LET %段 ÷ `段数$ ◎ ↓
~IF［ `入力~進捗~値$ ~GTE 0 ］~AND［ %出力~進捗~値 ~LT 0 ］ ⇒ ~RET 0 ◎ If input progress value ≥ 0 and current step < 0, let current step be zero.
~IF［ `入力~進捗~値$ ~LTE 1 ］~AND［ %出力~進捗~値 ~GT 1 ］ ⇒ ~RET 1 ◎ If input progress value ≤ 1 and current step > steps, let current step be steps.

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

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

似たような状況は、`段~位置$が `end$v にされた階段~計時~関数が，~animationの遅延~段階（ `animation-delay$p ）に適用されたときにも生じる。 ◎ A similar situation arises for a step timing function with a step position of end when applied to an animation during its delay phase.
~RET %出力~進捗~値 ◎ The output progress value is current step / steps.

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

`段~位置$は `start$v にされた`階段~計時~関数$を利用する
`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 timing 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$は ~ON にされ†、計時~関数が生産する`出力~進捗~値$は，最初の境目の直前に対応する 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 timing function will produce zero as its output progress value, i.e. the bottom of the first step.

~animationの時区間が始まる正確な瞬間における`入力~進捗~値$も，依然として 0 になるが、`直前~flag$は ~OFF にされる†ので，計時~関数の結果は最初の境目の直後に対応することになる。【† どこでそのように規定されている？】 ◎ 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 timing function will correspond to the top of the first step.

階段~計時~関数を指定するための構文は、次に従う： ◎ The syntax for specifying a step timing function is as follows:

`step-timing-function@t
    = `step-start$v
    | `step-end$v
    | `steps$f(`integer$t[, [ `start$v | `end$v ] ]?)

各種値の意味は、次に従う： ◎ The meaning of each value is as follows:

`step-start@v: `steps(1, start)^v に等価。 ◎ Equivalent to steps(1, start);
`step-end@v: `steps(1, end)^v に等価。 ◎ Equivalent to steps(1, end);
`steps@f(`integer$t[, [ `start$v | `end$v ] ]?): `階段~計時~関数$を指定する。 1 個目の~parameterは、関数における時区間の個数を指定する。値は正の整数で~MUST。 2 個目の~parameterは、値［ `start@v, `end@v ］のいずれかをとり，`段~位置$を指定する — 省略時は `end$v が与えられる。 ◎ Specifies a step timing function. The first parameter specifies the number of intervals in the function. It must be a positive integer greater than 0. The second parameter, which is optional, is either the value start or end, and specifies the step position. If the second parameter is omitted, it is given the value end.

2.4. ~frame数~計時~関数： `frames()$f

`~frame数~計時~関数@ は、`計時~関数$の一種であり，入力~時間軸を指定された個数の時区間に等分する。 `階段~計時~関数$と同じく、各~時区間には，等差で増えていく`出力~進捗~値$対応する。 `階段~計時~関数$からの相違は、`~frame数~計時~関数$においては，［最初, 最後の時区間に入る`入力~進捗~値$に対しては、順に，`出力~進捗~値$ 0, 1 を返す］ことにある。これは，例えば、~animation~loopの最初, 最後の~frameを，各~loopごとに他の~frameと等しい時間だけ表示するべきときに相応しくなる。 ◎ A frames timing function is a type of timing function that divides the input time into a specified number of intervals of equal length, each of which is associated with an output progress value of increasing value. The difference between a frames timing function and a step timing function is that a frames timing function returns the output progress values 0 and 1 for an equal portion of the input progress values in the range [0, 1]. This makes it suitable, for example, for using in animation loops where the animation should display the first and last frame of the animation for an equal amount of time as each other frame during each loop.

~frame数~計時~関数を下の例で示す： ◎ Some example frames timing functions are illustrated below.

`~frame数~計時~関数$は、 2 以上の整数をとる `~frame数@ で定義される。 ◎ A frames timing function is defined by an integral number of frames greater than one.

`階段~計時~関数$と同様に、段の境目における関数の結果は，概念的には境目の直後の段に対応する。 ◎ As with step timing functions, at the exact point where a step occurs the result of the function is conceptually the top of the step.

`出力~進捗~値$は、`入力~進捗~値$から次に従って計算した結果になる： ◎ The output progress value is calculated from the input progress value and before flag as follows:

%V ~LET `入力~進捗~値$ × `~frame数$ ◎ ↓
%現~frame ~LET floor( %V ) ◎ Calculate the current frame as floor(input progress value × frames).
%出力~進捗~値 ~LET ( %現~frame ÷ ( `~frame数$ − 1 ) ) ◎ Let the initial output progress value be current frame / (frames - 1).
~IF［ `入力~進捗~値$ ~LTE 1 ］~AND［ %出力~進捗~値 ~GT 1 ］ ⇒ ~RET 1 ◎ If input progress value ≤ 1 and output progress value > 1, let output progress value be 1.
~RET %出力~進捗~値 ◎ ↑

~frame数~計時~関数を指定する構文は、次に従う： ◎ The syntax for specifying a frames timing function is as follows:

`frames-timing-function@t = `frames@f(`integer$t)

関数への~parameterは、`~frame数$を指定し， 2 以上の整数で~MUST。 ◎ The parameter to the function specifies the number of frames. It must be a positive integer greater than 1.

2.5. 直列化

計時~関数は `CSSOM$r に定義される共通の直列化~patternに加えて，次の追加の要件を用いて直列化される： ◎ Timing 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 関数には変換されない。 ◎ 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() function before serializing.
階段~計時~関数［ `steps()$f 関数／ `step-start$v ／ `step-end$v ］は、`段~位置$に応じて，次の形に直列化する：

`end$v

`steps$f(`integer$t)

`start$v

`steps$f(`integer$t, `start$v)

◎ Step timing functions, whether they are specified using the steps() function or either of the step-start or step-end keywords, are serialized as follows: ◎ If the step position is end, serialize as steps(<integer>). ◎ Otherwise, serialize as steps(<integer>, start).

謝辞

この仕様は、 L. David Baron, Dean Jackson, David Hyatt, Chris Marrin. 各氏により編集された CSS Transitions 仕様に基づいている。次の方々からのフィードバックと協力にも感謝する： ◎ This specification is based on the CSS Transitions specification edited by L. David Baron, Dean Jackson, David Hyatt, and Chris Marrin.

The editors would also like to thank Douglas Stockwell, Steve Block, Tab Atkins, Rachel Nabors, Martin Pitt, Animation at Work slack community for their feedback and contributions.

CSS 計時関数 — CSS Timing Functions Level 1

要約

この文書の位置付け