CSS Easing Functions Module 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これは、 編集者草案の公な複製です… 【以下、この節の内容は，~SOTD-CSSに移譲。】
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.
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 [-∞, ∞].
注記： ~CSSにおける実数の範囲は，理論~的には無限であるが （ `CSS-VALUES-4$r `§ 範囲の制約と範囲~定義の記法＠~CSSVAL#numeric-ranges$ を見よ）、 ~UAは，巨大過ぎる実数を適度な範囲へ自動的に切詰めることになる。 ~easing関数が~CSS文脈の外側で利用される場合、［ 無限大になり得るもの （単に，浮動小数点数として格納された値が ごく巨大なために生産されるものも含む） を正しく取扱うか，`出力~進捗~値$を切詰める ］よう~careする必要がある。 ◎ Note: While CSS numbers have a theoretically infinite range (see CSS Values 4 § 5.1 Range Restrictions and Range Definition Notation) UAs will automatically clamp enormous numbers to a reasonable range. If easing functions are used outside of the CSS context, care must be taken to either correctly handle potential infinities (including those produced by merely very large values stored in a floating point number), or clamp the output progress value.
`~easing関数$には、 追加的に `直前~flag@V をとるものもある — それは、 真偽値であり，当の~easing【を利用する~animation】は［ まだ開始されてないか，逆行して完遂した ］ことを指示する。 （一部の~easing関数は、 所与の`入力~進捗~値$に対しアリな`出力~進捗~値$が複数あり得る — 一般に，それらのうち最後に指定された値が好まれるが、 この~flagは，代わりに［ 当の`~easing関数$の~animationが開始される前 ］において［ それらのうち最初に指定された値が好まれる ］ようにする。） ◎ Some types of easing functions also take an additional boolean before flag, which indicates the easing has not yet started, or is going in reverse and is past the finish. (Some easing functions can have multiple possible output progress values for a given input progress value, and generally favor the last one specified; this flag instead causes those easing functions to favor the first specified value before the animation has started.)
この仕様は、 いくつかの型の~easing関数を定義する。 ◎ This specification defines several types of easing functions:
`~easing関数$を指定するための構文は： ◎ The syntax for specifying an easing function is as follows:
`easing-function@t = `linear-easing-function$t | `cubic-bezier-easing-function$t | `step-easing-function$t
2.1. 線型~easing関数： `linear$v, `linear$f
`線型~easing関数@ （ `linear easing function^en ） は、 その`制御~点~list$を成す各`制御~点$の合間を線形に補間する`~easing関数$である。 各 `制御~点@ （ `control point^en ）は、 2 個の実数 ( `入力@eP, `出力@eP ) が成す~pairであり， `入力$ePが表現する`入力~進捗~値$を`出力$ePが表現する`出力~進捗~値$へ結付ける。 ◎ 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@t
= `linear$v
| `linear()$t
`linear()@t
= linear( [ `number$t && `percentage$t{0,2} ]# )
- `linear@v
- `linear(0, 1)^v と等価になる。 ◎ Equivalent to linear(0, 1)
- `linear$f
- `線型~easing関数$を指定する。 ◎ Specifies a linear easing function.
-
~commaで分離された各~引数は、 指定された `percentage$t の個数に応じて：
- 0 個の場合 ⇒ 1 個の`制御~点$を指定する — その`入力$ePは、 初期~時は ~NULL 【！empty】になる。 これは、 `使用~値$の時点で`制御~点~listを正準-化する$ことにより正される。
-
1 個の場合 ⇒ 1 個の`制御~点$を指定する — その`入力$ePは、 指定された `percentage$t を 0 以上 1 以下の `number$t に換算した結果になる。
【 ［ `0%^v ／ `100%^v ］が［ 0 ／ 1 ］に対応する。 構文においては値の範囲は特に制限されていないので、 0% 未満の値なども妥当になり， 0 に換算されることになる。 】
- 2 個の場合 ⇒ 2 個の`制御~点$を — `percentage$t ごとに，指定された順序で — 定義する。 それらの`入力$ePは、 前項と同様に決定される。
いずれの場合も、 `制御~点$の`出力$ePは， 指定された `number$t に等しくなる。
`線型~easing関数$の `制御~点~list@ ~FN は、 これらの引数により定義される`制御~点$たちが成す 指定された順序による`~list$である。
【~FN この用語は、 他所を明確に述べるための，この訳による追加。 】
◎ 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. This is corrected at used value time by linear() canonicalization.
`制御~点~listを正準-化する@ ~algoは、 所与の ( `linear$f 関数の`制御~点~list$ %制御~点~list ) に対し： ◎ To canonicalize a linear() function’s control points, perform the following:
- ~IF［ %制御~点~list[ 0 ] の`入力$eP ~EQ ~NULL ］ ⇒ %制御~点~list[ 0 ] の`入力$eP ~SET 0 ◎ If the first control point lacks an input progress value, set its input progress value to 0.
- ~IF［ %制御~点~list[ %制御~点~list の`~size$ ~MINUS 1 ] の`入力$eP ~EQ ~NULL ］ ⇒ %制御~点~list[ %制御~点~list の`~size$ ~MINUS 1 ] の`入力$eP ~SET 1 ◎ If the last control point lacks an input progress value, set its input progress value to 1.
- %下限 ~LET 負な無限大 ◎ ↓
-
%制御~点~list を成す ~EACH( %制御~点 ) に対し：
- %入力 ~LET %制御~点 の`入力$eP
- ~IF［ %入力 ~EQ ~NULL ］ ⇒ ~CONTINUE
- %下限 ~SET `max^op( %入力, %下限 )
- %制御~点 の`入力$eP ~SET %下限
-
【 この段は、［ `入力$ePに ~NULL を伴う`制御~点$ ］たちが成す連列に対し，それらの`入力$ePに［ 当の連列の前後の`制御~点$の`入力$ePから均等な間隔になるよう補間した結果 ］をアテガう。 原文の記述は，ここに述べた様な短いものだが、 この訳では，それを詳細な形にして述べる。 】
- %始端 ~LET ~NULL
- %~NULL連列 ~LET 新たな`~list$
-
%制御~点~list を成す ~EACH( %制御~点 ) に対し：
- %入力 ~LET %制御~点 の`入力$eP
-
~IF［ %入力 ~EQ ~NULL ］：
- %~NULL連列 に %制御~点 を`付加する$
- ~CONTINUE
-
~IF［ %~NULL連列 は`空$でない ］：
- ~Assert： %始端 ~NEQ ~NULL
- %間隔 ~LET ( %入力 ~MINUS %始端 ) ~DIV ( %~NULL連列 の`~size$ ~PLUS 1 )
-
%~NULL連列 を成す ~EACH( %制御~点 ) に対し：
- %始端 ~INCBY %間隔
- %制御~点 の`入力$eP ~SET %始端
- %~NULL連列 を`空にする$
- %始端 ~SET %入力
- ~Assert： %~NULL連列 は`空$である
注記： 正準-化~後には、 どの`制御~点$も，その`入力$ePは ~NULL 以外になり、 それらの`入力$ePは，~list順に単調に非~減少するようになる。 ◎ After canonicalization, every control point has an input progress value, and the input progress values are monotonically non-decreasing along the list.
注記： 直列化は，`入力$eP用の値が元々給されたか否かに依拠するので、 その情報は`内部~表現$内に維持されるべきである。 直列化は、 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.
2.1.1. 直列化-法
`linear$v ~keywordは、 それ自身に直列化される。 ◎ The linear keyword is serialized as itself.
`線型~easing関数を直列化する@ ~algoは、 所与の ( `線型~easing関数$ %関数 ) に対し： ◎ To serialize a linear() function:
- %引数~群 ~LET « » ◎ ↓ Let s be the string "linear(".
- %関数 の【正準-化-済みな】`制御~点~list$を成す ~EACH( %制御~点 ) に対し ⇒ %引数~群 に次の結果を`付加する$ ⇒ `制御~点を直列化する$( %制御~点 ) ◎ Serialize each control point of the function,＼
- %引数~文字列 ~LET %引数~群 を `, ^l で`連結する$ ◎ concatenate the results using the separator ", ", and append the result to s.
- ~RET 次を順に`連結する$ ⇒＃ `linear(^l, %引数~文字列, `)^l ◎ Append ")" to s, and return it.
`制御~点を直列化する@ ~algoは、 所与の ( `制御~点$ %制御~点 ) に対し： ◎ To serialize a linear() control point:
- %出力 ~LET %制御~点 の`出力$eP を `number$t として直列化した結果 ◎ Let s be the serialization, as a <number>, of the control point’s output progress value.
- ~IF［ %制御~点 の`入力$eP用の値は元々は欠如していた 【正準-化される前は ~NULL であった】 ］ ⇒ ~RET %出力 ◎ If the control point originally lacked an input progress value, return s.
- ~RET 次を順に`連結する$ ⇒＃ %出力, 1 個の `0020^U `SPACE^cn, %制御~点 の`入力$ePを `percentage$t として直列化した結果 ◎ Otherwise, append " " (U+0020 SPACE) to s, then serialize the control point’s input progress value as a <percentage> and append it to s. ◎ Return s.
直列化されるとき、 元々 2 個の`入力$ePを伴って指定された引数【！`制御~点$】は， 2 個の別々な`制御~点$に転換され、 `制御~点$たちの`入力$ePは厳密に昇順になる。 例えば： ◎ When serialized, control points originally specified with two input progress values are turned into two separate control points, and the input progress values are in strictly ascending order. For example:
- `linear(0, 0.25, 1)^v は `linear(0, 0.25, 1)^v として直列化される。 ◎ linear(0, 0.25, 1) serializes as linear(0, 0.25, 1)
- `linear(0 20%, 0.5 10%, 1)^v は `linear(0 20%, 0.5 20%, 1)^v として直列化される。 ◎ linear(0 20%, 0.5 10%, 1) serializes as linear(0 20%, 0.5 20%, 1)
- `linear(0, 0.25 25% 75%, 1)^v は `linear(0, 0.25 25%, 0.25 75%, 1)^v として直列化される。 ◎ linear(0, 0.25 25% 75%, 1) serializes as linear(0, 0.25 25%, 0.25 75%, 1)
2.1.2. 出力
`線型~easing出力~進捗を計算する@ ~algoは、 所与の ( `線型~easing関数$ %関数, `入力~進捗~値$ %入力~進捗, `直前~flag$V ~DF ~F ) に対し，`出力~進捗~値$を返す： ◎ To calculate linear easing output progress for a given linear easing function func, an input progress value inputProgress, and an optional before flag (defaulting to false), perform the following. It returns an output progress value.
- %制御~点~list ~LET %関数 の【正準-化-済みな】`制御~点~list$ ◎ Let points be func’s control points.
- %個数 ~LET %制御~点~list の`~size$ ◎ ↓
- ~Assert： %個数 ~GTE 1
- ~IF［ %個数 ~EQ 1 ］ ⇒ ~RET %制御~点~list[ 0 ] の`出力$eP ◎ If points holds only a single item, return the output progress value of that item.
- ~IF［ %直前~flag ~EQ ~T ］~AND［ %入力~進捗 ~EQ %制御~点~list[ 0 ] の`入力$eP ］ ⇒ ~RET %制御~点~list[ 0 ] の`出力$eP ◎ If inputProgress matches the input progress value of the first point in points, and the before flag is true, return the first point’s output progress value.
- %A ~LET %制御~点~list を成す`制御~点$のうち次を満たすものは［ 在るならば それらのうち最後のもの／ 無いならば ε ］ ⇒ その`入力$eP ~LTE %入力~進捗 ◎ ↓
- %B ~LET %制御~点~list を成す`制御~点$のうち次を満たすものは［ 在るならば それらのうち最初のもの／ 無いならば ε ］ ⇒ その`入力$eP ~GT %入力~進捗 ◎ ↓
- ~IF［ %A ~NEQ ε ］~AND［ %A の`入力$eP ~EQ %入力~進捗 ］ ⇒ ~RET %A の`出力$eP ◎ If inputProgress matches the input progress value of at least one point in points, return the output progress value of the last such point.
-
~IF［ %A ~EQ ε ］：
- %A ~SET %制御~点~list[ 0 ]
- %B ~SET %制御~点~list[ 1 ]
- ~IF［ %A の`入力$eP ~EQ %B の`入力$eP ］ ⇒ ~RET %A の`出力$eP
-
~ELIF［ %B ~EQ ε ］：
- %A ~SET %制御~点~list[ %個数 ~MINUS 2 ]
- %B ~SET %制御~点~list[ %個数 ~MINUS 1 ]
- ~IF［ %A の`入力$eP ~EQ %B の`入力$eP ］ ⇒ ~RET %B の`出力$eP
- ~RET %A の`出力$eP ~PLUS ( %B の`出力$eP ~MINUS %A の`出力$eP ) ~MUL ( ( %入力~進捗 ~MINUS %A の`入力$eP ) ~DIV ( %B の`入力$eP ~MINUS %A の`入力$eP ) ) ◎ •↑↑ Otherwise, let A be the last control point whose input progress value is smaller than inputProgress, and let B be the first control point whose input progress value is larger than inputProgress. ◎ Linearly interpolate (or extrapolate) inputProgress along the line defined by A and B, and return the result.
2.1.3. 例
`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:
~graphに~plotされた `linear(0, 0.25, 1)^v 。 ◎ linear(0, 0.25, 1) plotted on a graph
既定では、 明示的な “入力” を伴わない値は，両側の~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:
~graphに~plotされた `linear(0, 0.25 75%, 1)^v 。 この~graphには、 3 個の点 — 順に， ( 0, 0 ), ( 0.75, 0.25 ), ( 1, 1 ) — がある。 ◎ linear(0, 0.25 75%, 1) plotted on a graph. The graph has three points. The first is at 0,0. The second is at 0.75,0.25. The third is at 1,1.
| ~easing関数 | 例 |
|---|---|
| `linear$v | |
| `linear(0, .25 75%, 1)^v |
1 個の出力~用に 2 個の入力~値が供された場合、 その結果は，同じ出力を伴う 2 個の点になる。 それは、 当の~easingを 2 個の入力の合間で “静止させる”。 ◎ If two input values are provided for a single output, it results in two points with the same output, causing the easing to "pause" between the two inputs.
例えば， `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:
~graphに~plotされた `linear(0, 0.25 75%, 1)^v 。 この~graphには、 4 個の点 — 順に， ( 0, 0 ), ( 0.25, 0.25 ), ( 0.75, 0.25 ), ( 1, 1 ) — がある。 ◎ linear(0, 0.25 75%, 1) plotted on a graph. The graph has four points. The first is at 0,0. The second is at 0.25,0.25. The third is at 0.75,0.25. The forth is at 1,1.
| ~easing関数 | 例 |
|---|---|
| `linear$v | |
| `linear(0, 0.25 25% 75%, 1)^v |
【補間-時に】供された入力が【 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:
~graphに~plotされた `linear(0, 0.25 75%, 1)^v 。 この~graphには、 4 個の点 — 順に， ( 0, 0 ), ( 0.25, 0.25 ), ( 0.75, 0.25 ), ( 1, 1 ) — がある。 この~graphの両端から外へは、 それぞれ，内からの線の角度で延長される。 ◎ linear(0, 0.25 75%, 1) plotted on a graph. The graph has four points. The first is at 0,0. The second is at 0.25,0.25. The third is at 0.75,0.25. The forth is at 1,1. The ends of the graph are extended at the angle of the nearest two lines.
`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.
荒い跳返り~easingの~graph。 ◎ The graph of a rough bounce easing.
| ~easing関数 | 例 |
|---|---|
| `linear$v | |
| `linear(...)^v |
より遅い~animationには，もっと滑らかな結果が必要になろうが、 利用する点を~~増やすことで作成できる。 ◎ More points could be used to create a smoother result, which may be needed for slower animations.
2.2. ~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関数$であり， 2 個の制御~点により定義される［ ~cubic多項式による曲線 ］を利用して 0 から 1 へ滑らかに補間する。 この曲線は、 これらの制御~点に近付くが，実際には（通例的に）達しない。 （~cubic~Bezierの両 “端点” は、［ ( 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.)
`~cubic~Bezier~easing関数$の構文は： ◎ A cubic Bézier easing function has the following syntax:
`cubic-bezier-easing-function@t
= `ease$v
| `ease-in$v
| `ease-out$v
| `ease-in-out$v
| `cubic-bezier()$t
`cubic-bezier()@t
= cubic-bezier( [ `number [0,1]$t, `number$t ]#{2} )
各種 値の意味は： ◎ The meaning of each value is as follows:
- `ease-in@v
- 関数は、 遅く滑らかに開始して，ほぼ線型な曲線で終端~点へ速く近付く。 ◎
- `cubic-bezier(0.42, 0, 1, 1)^v と等価になる。 ◎ 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@v
- 関数は、 ほぼ線型な曲線で速く開始して， 遅く滑らかに終端~点へ近付く。 ◎
- `cubic-bezier(0, 0, 0.58, 1)^v と等価になる。 ◎ 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@v
- 関数は、 遅く滑らかに開始して， 途中を速く辿って， 遅く滑らかに終了~する。 ◎
- `cubic-bezier(0.42, 0, 0.58, 1)^v と等価になる。 ◎ 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@v
- `ease-in-out$v に類似するが、 それより速く開始して遅く完遂する。 ◎
- `cubic-bezier(0.25, 0.1, 0.25, 1)^v と等価になる。 ◎ 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 )^v
- `~cubic~Bezier~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] に入らなければナラナイ — さもなければ、 当の関数【！the definition】は無効になる。 ◎ Both x values must be in the range [0, 1] or the definition is invalid.
-
~cubic~Bezier曲線についての詳細 ◎ Details on cubic Bézier curves
これは、 `入力~進捗~値$を［ ~cubic~Bezier曲線を~parameter化するために共通的に利用される %t ］として利用する （出力として二次元な点を生産する）ことは`なく^em， ~graphの~x値として利用する （出力として~y値を生産する）ことに注意。 このことは、 問われるのは［ 曲線に沿った速度ではなく，曲線の`形状^emに限られる ］ことを意味する。 例えば， `cubic-bezier(0, 0, 0, 0)^v と `cubic-bezier(1, 1, 1, 1)^v は、 正確に同じ（線型）~easingを生産する — 前者の`速度^emは［ %t の3 乗 ］曲線に従うが、 後者は［ %t の ( 1 ~DIV 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.
~cubic~Bezier曲線は、 `一般には^em，~loopを成し得る — すなわち，同じ~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.
上に挙げた~keyword値を下の例で示す： ◎ The keyword values listed above are illustrated below.
| ~easing関数 | 例 |
|---|---|
| `linear$v | |
| `ease-in$v | |
| `ease-out$v | |
| `ease-in-out$v | |
| `ease$v |
2.2.1. 直列化-法
次に挙げる~keywordは、 それ自身に直列化される ⇒＃ `ease-in$v, `ease-out$v, `ease-in-out$v, `ease$v ◎ The ease-in, ease-out, ease-in-out, and ease keywords serialize as themselves.
`~cubic~Bezier~easing関数を直列化する@ ~algoは、 所与の ( `~cubic~Bezier~easing関数$ %関数 ) に対し： ◎ To serialize a cubic-bezier() function:
- %引数~文字列 ~LET 次を順に `, ^l で`連結する$ ⇒ %関数 の［ 1 個目, 2 個目, 3 個目, 4 個目 ］の引数を `number$t として直列化した結果 ◎ ↓ Let s be the string "cubic-bezier(". ◎ Serialize the function’s four arguments as <number>s, concatenate the results using the separator ", ", and append the result to s.
- ~RET 次を順に`連結する$ ⇒＃ `cubic-bezier(^l, %引数~文字列, `)^l ◎ Append ")" to s, and return it.
2.2.2. 出力
`~cubic~Bezier~easing出力~進捗を計算する@ ~algoは、 所与の ( `~cubic~Bezier~easing関数$ %関数, `入力~進捗~値$ %入力~進捗 ) に対し，`出力~進捗~値$を返す： ◎ To calculate cubic Bézier easing output progress for a given cubic Bézier easing function func and an input progress value inputProgress, perform the following. It returns an output progress value.
- %p0 ~LET 点 ( 0, 0 ) ◎ Let p0 be the point (0,0),＼
- %p1 ~LET %関数 の ( 1 個目の引数, 2 個目の引数 ) により与えられる点 ◎ p1 be the point given by func’s first two arguments,＼
- %p2 ~LET %関数 の ( 3 個目の引数, 4 個目の引数 ) により与えられる点 ◎ p2 be the point given by func’s second two arguments,＼
- %p3 ~LET 点 ( 1, 1 ) ◎ and p3 be the point (1,1).
-
~IF［ 0 ~LTE %入力~進捗 ］~AND［ %入力~進捗 ~LTE 1 ］ ⇒ ~RET ［ 端点 %p0, %p3, 制御~点 %p1, %p2 ］により定義される~cubic~Bezier曲線において， ~x値 %入力~進捗 に対応する~y値 ◎ If inputProgress is within the range [0,1] (inclusive), return the y value corresponding to inputProgress as an x value for the cubic Bézier curve defined as having p0 and p3 as endpoints, and p1 and p2 as control points.
~Bezier曲線の評価を受持つ資料は、 `FUND-COMP-GRAPHICS$r など，数多くある。 ◎ The evaluation of this curve is covered in many sources, such as [FUND-COMP-GRAPHICS].
他の場合、 ~Bezier曲線は，端点における接線を利用して無限に延伸される。 この接線は、 以下に従って得られる 2 個の点 %t1, %t2 を通過する直線として定義される。 ◎ Otherwise, the curve is extended infinitely, using the tangent of the curve at the endpoints. This tangent is defined as the line between two points,＼
- ( %t1, %t2 ) ~LET ( ε, ε ) ◎ t1 and t2.
-
~IF［ %入力~進捗 ~LT 0 ］： ◎ • If inputProgress is less than 0,＼
- %t1 ~SET %p0 ◎ let t1 be p0.
- ~IF［ %p1 の~x値 ~GT 0 ］ ⇒ %t2 ~SET %p1 ◎ • If the x value of p1 is greater than 0, let t2 be p1.
- ~ELIF［ %p2 の~x値 ~GT 0 ］ ⇒ %t2 ~SET %p2 ◎ • Otherwise, if the x value of p2 is greater than 0, let t2 be p2.
- ~ELSE ⇒ ~RET 0 ◎ • Otherwise, return 0.
-
~ELSE（ %入力~進捗 ~GT 1 ）： ◎ • If inputProgress is greater than 1,＼
- %t2 ~SET %p3 ◎ let t2 be p3.
- ~IF［ %p2 の~x値 ~LT 1 ］ ⇒ %t1 ~SET %p2 ◎ • If the x value of p2 is less than 1, let t1 be p2.
- ~ELIF［ %p1 の~x値 ~LT 1 ］ ⇒ %t1 ~SET %p1 ◎ • Otherwise, if the x value of p1 is less than 1, let t1 be p1.
- ~ELSE ⇒ ~RET 1 ◎ • Otherwise, return 1.
- ~RET %t1, %t2 を通過する直線において，~x値 %入力~進捗 に対応する~y値 ◎ Return the y value corresponding to inputProgress as an x value for the line passing through t1 and t2.
2.3. 階段~easing関数： `step-start^v, `step-end^v, `steps()^f
`階段~easing関数@ （ `step easing function^en ） は、 入力~区間 [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@t = `step-start$v | `step-end$v | `steps()$t `steps()@t = steps( `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
- ~easing区間の始端にて，開始~時の値から終了~時の値へ跳上がる。 ◎ Jumps from the starting to the ending value at the start of the easing interval.
- `steps(1, start)^v に算出される。 ◎ Computes to steps(1, start)
- `step-end@v
- ~easing区間の終端にて，開始~時の値から終了~時の値へ跳上がる。 ◎ Jumps from the starting to the ending value at the end of the easing interval.
- `steps(1, end)^v に算出される。 ◎ Computes to steps(1, end)
-
階段~easing関数の各種~keyword値の例。 ◎ Example step easing function keyword values. - `steps$f
- 1 個目の引数 `integer$t は、 `段~数$を指定する。 入力~区間 [0, 1] は，この段~数で等分され、 各~区間の中では，`出力~進捗~値$は一定になる。 `出力~進捗~値$は、 `step-position$t に指定された~keyword — 省略された場合の既定は `end$v — に則って決定される。 ◎ 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$t は、 `step-position$t に応じて［ `jump-none$v ならば 2 以上／ ~ELSE_ 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$t は、 次に挙げる~keywordをとる — それは、 `段~位置$を指定する： ◎ The <step-position> keywords are:
- `jump-start@v
- 最初の区間における`出力~進捗~値$は ( 1 ~DIV `段~数$ ) になる。 ◎ The first interval has an output progress value of 1/steps,＼
- 区間どうしの段差は ( 1 ~DIV `段~数$ ) になる。 ◎ and subsequent intervals rise by 1/steps.
- （始端にて “跳上がる” 。 0 を返す段は無い。) ◎ (It "jumps at the start", with no step returning 0.)
- `jump-end@v
- 最初の区間における`出力~進捗~値$は 0 になる。 ◎ The first interval has an output progress value of 0,＼
- 区間どうしの段差は ( 1 ~DIV `段~数$ ) になる。 ◎ and subsequent intervals rise by 1/steps.
- （終端にて “跳上がる” 。 1 を返す段は無い。) ◎ (It "jumps at the end", with no step returning 1.)
- `jump-none@v
- 最初の区間における`出力~進捗~値$は 0 になる。 ◎ The first interval has an output progress value of 0,＼
- 区間どうしの段差は ( 1 ~DIV ( `段~数$ ~MINUS 1 ) ) になる。 ◎ and subsequent intervals rise by 1/(steps-1).
- （始端, 終端にて “跳上がる” ことはない。 0 を返す段, 1 を返す段はどちらもある。） ◎ (It "never jumps", with steps returning both 0 and 1.)
- `jump-both@v
- 最初の区間における`出力~進捗~値$は ( 1 ~DIV ( `段~数$ ~PLUS 1 ) ) になる。 ◎ The first interval has an output progress value of 1/(steps+1),＼
- 区間どうしの段差は ( 1 ~DIV ( `段~数$ ~PLUS 1 ) ) になる。 ◎ and subsequent intervals rise by 1/(steps+1).
- （始端, 終端にて “跳上がる” 。 0 を返す段, 1 を返す段はどちらも無い。） ◎ (It "jumps at both ends", with no steps returning 0 or 1.)
- `start@v
- `jump-start$v として挙動する。 ◎ Behaves as jump-start.
- `end@v
- `jump-end$v として挙動する。 ◎ Behaves as jump-end.
これらの `jump-*^v ~keyword値を以下に図示する： ◎ The jump-* keywords values are illustrated below:
2.3.1. 直列化-法
他の`~easing関数$用の~keywordとは違って、［ `step-start$v ／ `step-end$v ］は，それ自身として`直列化しないこと^em — それらは、 代わりに［ `steps(1, start)^l ／ `steps(1)^l ］として直列化される。 ◎ Unlike the other easing function keywords, step-start and step-end do not serialize as themselves. Instead, they serialize as "steps(1, start)" and "steps(1)", respectively.
`階段~easing関数を直列化する@ ~algoは、 所与の ( `階段~easing関数$ %関数 ) に対し： ◎ To serialize a steps() functions:
- %段~位置~文字列 ~LET 空~文字列
- ~IF［ %関数 の`段~位置$ ~NIN { `end$v, `jump-end$v } ］ ⇒ %段~位置~文字列 ~SET 次を順に`連結する$ ⇒＃ `, ^l, %関数 の`段~位置$を~keywordとして直列化した結果
- ~RET 次を順に`連結する$ ⇒＃ `steps(^l, %関数 の`段~数$を直列化した結果, %段~位置~文字列, `)^l ◎ Let s be the string "steps(". ◎ Serialize the function’s steps, and append it to s. ◎ If the function’s step position is end or jump-end, append ")" to s and return s. ◎ Otherwise, append ", " to s. Serialize the step position as a keyword, and append the result to s. Append ")" to s. Return s.
2.3.2. 出力
`階段~easing出力~進捗を計算する@ ~algoは、 所与の ( `階段~easing関数$ %関数, `入力~進捗~値$ %入力~進捗, `直前~flag$V ~DF ~F ) に対し，`出力~進捗~値$を返す： ◎ To calculate step easing output progress for a given step easing function func, an input progress value inputProgress, and an optional before flag (defaulting to false), perform the following. It returns an output progress value.
- ~IF［ %直前~flag ~EQ ~T ］ ⇒ ~RET 0 ◎ If the before flag is true, return 0.
- %段~数 ~LET %関数 の`段~数$ ◎ Let steps be func’s steps,＼
- %段~位置 ~LET %関数 の`段~位置$ ◎ and position be func’s step position.
- ~IF［ %入力~進捗 ~LT 0 ］ ⇒ ~RET 0 ◎ ↓
- ~IF［ %入力~進捗 ~GTE 1 ］ ⇒ ~RET 1 ◎ ↓
-
%区間 ~LET 次を満たす最大な整数 ⇒ %区間 ~LT %入力~進捗 ~MUL %段~数
注記： 言い換えれば、 区間と区間の境目は，後にある区間に属する。
◎ Divide the interval [-∞, ∞] into several segments, each with an associated value, as follows: • ↑ [-∞, 0) has the value 0. • ↑ [1, ∞] has the value 1. • [0, 1) is divided into steps half-open intervals, [0, ...) to [..., 1)＼ ↓ with their values assigned as defined for the position (see <step-position>). ◎ Note: In other words, at the boundary between intervals, the associated value is the higher value. - ~RET ( %段~位置 に応じて定義される最初の区間における`出力~進捗~値$ ) ~PLUS ( %段~位置 に応じて定義される段差 ) ~MUL %区間 ◎ Return the associated value for the interval that inputProgress is in.
2.4. 直列化
~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 ］関数には`変換されない^em。
◎ 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(`integer$t)◎ If the step position is jump-end or end, serialize as steps(<integer>). -
~ELSE_
⇒
steps(`integer$t, `step-position$t)◎ Otherwise, serialize as steps(<integer>, <step-position>).
-
`jump-end$v ／ `end$v
ならば
⇒
- `linear$f を介して作成された`線型~easing関数$ %関数 は、 次の結果に直列化される ⇒ `線型~easing関数を直列化する$( %関数 ) 【！#linear-easing-function-serialized-computed-value】 ◎ A linear easing function created via linear() is serialized by getting its serialized computed value.
~privacyの考慮点
この仕様に対し報告された，新たな~privacyの考慮点は、無い。 ◎ No new privacy considerations have been reported on this specification.
この仕様は、 他の仕様から参照できる共通な定義を供するものであり， ~Web~platformに新たな能力を直に導入することはない。 ◎ 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.
~securityの考慮点
~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.
変更点
- `2024年 8月 28日 作業草案＠~TR/2024/WD-css-easing-2-20240828/$ からの変更点 ◎ 3.1. Changes since the FPWD of 28 August 2024
- 【 変更点はあるが，まだ述べられていない。 】
- ~level 1 からの追加 ◎ 3.2. 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