[web-animations-1][editorial] Rename ‘timing function’ to ‘easing fun…

…ction’.

web-animations-1/Overview.bs

@@ -3230,23 +3230,23 @@ Animation effects {#animation-effects}
   For example, easing the rate of animation
   can create a sense of momentum and produce a more natural effect.
   The <a href="https://www.w3.org/TR/css-easing/">CSS Easing Functions Module</a>
-  defines [=timing functions=] for this purpose.
+  defines [=easing functions=] for this purpose.
   [[!CSS-EASING-1]]
 
   [=Animation effects=] each have
-  an <dfn for="animation effect">effect timing function</dfn>,
-  which is a [=timing function=]
+  an <dfn for="animation effect">effect easing function</dfn>,
+  which is an [=easing function=]
   used to transform progress across the entirety of each iteration.
   See [[#calculating-the-transformed-progress]].
 
-  The default [=effect timing function=]
-  is the [=linear timing function=].
+  The default [=effect easing function=]
+  is the [=linear easing function=].
 
   Note: Specific [[#types-of-animation-effects|types of animation effects]]
   may provide additional time transformations.
   For example, [=keyframe effects=] can provide
-  [=keyframe-specific timing functions=]
-  that can apply a [=timing function=]
+  [=keyframe-specific easing functions=]
+  that can apply an [=easing function=]
   specifically between two adjacent keyframes.
 
 Calculating progress {#core-animation-effect-calculations}
@@ -3299,7 +3299,7 @@ Calculating progress {#core-animation-effect-calculations}
       (5) The [=simple iteration progress=] is converted
           into a [=directed progress=]
           by incorporating the [=playback direction=].<br>
-      (6) Finally, a timing function is applied to the [=directed progress=]
+      (6) Finally, an [=easing function=] is applied to the [=directed progress=]
           to produce the [=transformed progress=].
     </figcaption>
   </figure>
@@ -3401,7 +3401,7 @@ Calculating progress {#core-animation-effect-calculations}
   The <dfn>simple iteration progress</dfn>
   is a fraction of the progress through the current iteration
   that ignores transformations to the time introduced by
-  the [=playback direction=] or [=timing functions=] applied to the effect,
+  the [=playback direction=] or [=easing functions=] applied to the effect,
   and is calculated as follows:
 
   1. If the [=overall progress=] is [=unresolved=],
@@ -3528,7 +3528,7 @@ Calculating progress {#core-animation-effect-calculations}
           and <var>going forwards</var> is false.
 
   1. Return the result of evaluating
-      the [=effect timing function=]
+      the [=effect easing function=]
       passing [=directed progress=] as the <a spec=css-easing>input progress value</a>
       and |before flag| as the <a spec=css-easing>before flag</a>.
 
@@ -3756,13 +3756,13 @@ Keyframe effects {#keyframe-effects}
   or have unsupported values is defined in
   [[#the-effect-value-of-a-keyframe-animation-effect]].
 
-  Each keyframe also has a <dfn>keyframe-specific timing function</dfn>
-  associated with it, which is a [=timing function=]
+  Each keyframe also has a <dfn>keyframe-specific easing function</dfn>
+  associated with it, which is an [=easing function=]
   that is applied to the period of time between
   the keyframe on which it is specified
   and the <em>next</em> keyframe in the list.
 
-  Note: The [=timing function=] specified on the last keyframe in the list
+  Note: The [=easing function=] specified on the last keyframe in the list
   is never applied.
 
   Each [=keyframe=] may have a <dfn>keyframe-specific composite operation</dfn>
@@ -4072,7 +4072,7 @@ Keyframe effects {#keyframe-effects}
             / (<var>end offset</var> − <var>start offset</var>)</code>.
 
   1. Let |transformed distance| be the result of evaluating
-      the [=timing function=] associated with
+      the [=easing function=] associated with
       the first keyframe in |interval endpoints|
       passing |interval distance| as the input progress.
 
@@ -4135,7 +4135,7 @@ Keyframe effects {#keyframe-effects}
   </div>
 
   <div class=issue>
-    In the presence of certain timing functions,
+    In the presence of certain easing functions,
     the input [=iteration progress=] to an animation effect
     is not limited to the range [0, 1].
     Currently, however, keyframe offsets <em>are</em> limited to the range [0, 1]
@@ -4147,12 +4147,12 @@ Keyframe effects {#keyframe-effects}
     to be able to specify non-linear changes in property values
     at [=iteration progress=] values outside the range [0, 1].
     One example is an animation that interpolates from green to yellow
-    but has an overshoot timing function
+    but has an overshoot easing function
     that makes it temporarily interpolate “beyond” yellow to red
     before settling back to yellow.
 
     While this effect could be achieved by
-    modification of the keyframes and timing function,
+    modification of the keyframes and easing function,
     this approach seems to break the model's separation
     of timing concerns from animation effects.
 
@@ -5281,7 +5281,7 @@ The {{AnimationEffect}} interface {#the-animationeffect-interface}
 
   : <dfn>easing</dfn>
   ::
-      The [=timing function=] used to scale the time
+      The [=easing function=] used to scale the time
       to produce easing effects.
 
       The syntax of the string is defined
@@ -5385,7 +5385,7 @@ The {{AnimationEffect}} interface {#the-animationeffect-interface}
       * {{EffectTiming/iterations}} &rarr; [=iteration count=]
       * {{EffectTiming/duration}} &rarr; [=iteration duration=]
       * {{EffectTiming/direction}} &rarr; [=playback direction=]
-      * {{EffectTiming/easing}} &rarr; [=timing function=]
+      * {{EffectTiming/easing}} &rarr; [=easing function=]
 
 ### The <code>ComputedEffectTiming</code> dictionary ### {#the-computedeffecttiming-dictionary}
 
@@ -5589,7 +5589,7 @@ The {{KeyframeEffect}} interface {#the-keyframeeffect-interface}
               * [=iteration duration=],
               * [=playback direction=],
                 and
-              * [=timing function=].
+              * [=easing function=].
 
           Note: Unlike
           the {{KeyframeEffect(target, keyframes, options)}} constructor,
@@ -5712,7 +5712,7 @@ The {{KeyframeEffect}} interface {#the-keyframeeffect-interface}
 
         : <code>easing</code>
         ::
-            The [=timing function=] used to transform the progress of time
+            The [=easing function=] used to transform the progress of time
             from this keyframe until the next keyframe in the series.
 
         : <code>composite</code>
@@ -5777,7 +5777,7 @@ The {{KeyframeEffect}} interface {#the-keyframeeffect-interface}
               to the respective
               [=keyframe offset=],
               [=computed keyframe offset=],
-              keyframe-specific [=timing function=],
+              keyframe-specific [=easing function=],
               and [=keyframe-specific composite operation=]
               values of |keyframe|.
 
@@ -6021,7 +6021,7 @@ The {{KeyframeEffect}} interface {#the-keyframeeffect-interface}
     </pre>
   </div>
 
-  Likewise [=timing functions=] and [=keyframe-specific composite operations=]
+  Likewise [=easing functions=] and [=keyframe-specific composite operations=]
   may be specified in either form.
   The array-form allows specifying different values for each [=keyframe=]
   whilst for the object-form,
@@ -6030,8 +6030,8 @@ The {{KeyframeEffect}} interface {#the-keyframeeffect-interface}
 
   <div class=example>
     <pre highlight=javascript>
-      // Since timing functions apply _between_ keyframes, even if we specify a
-      // a timing function on the last keyframe it will be ignored.
+      // Since easing functions apply _between_ keyframes, even if we specify a
+      // an easing function on the last keyframe it will be ignored.
       elem.animate([ { color: 'blue', easing: 'ease-in' },
                      { color: 'green', easing: 'ease-out' },
                      { color: 'yellow' } ], 2000);
@@ -6048,8 +6048,8 @@ The {{KeyframeEffect}} interface {#the-keyframeeffect-interface}
   </div>
 
   Note that the <code>easing</code> property in either form
-  sets the <em>keyframe-specific [=timing function=]</em>.
-  This is independent from the [=timing function=]
+  sets the <em>keyframe-specific [=easing function=]</em>.
+  This is independent from the [=easing function=]
   that applies to the entire [=iteration duration=] of the [=keyframe effect=]
   as specified using a {{KeyframeEffectOptions}} object
   (or {{KeyframeAnimationOptions}} object
@@ -6117,7 +6117,7 @@ The {{KeyframeEffect}} interface {#the-keyframeeffect-interface}
 
   : <code>easing</code>
   ::
-      The [=timing function=] used to transform the progress of time
+      The [=easing function=] used to transform the progress of time
       from this keyframe until the next keyframe in the series.
 
       The syntax and error-handling associated with parsing this string
@@ -6505,7 +6505,7 @@ The {{KeyframeEffect}} interface {#the-keyframeeffect-interface}
             SHOULD produce an appropriate warning
             highlighting the invalid property value.
 
-        1. Let the [=timing function=] of |frame| be
+        1. Let the [=easing function=] of |frame| be
             the result of parsing the <code>easing</code> property on |frame|
             using the CSS syntax defined for
             the {{EffectTiming/easing}} member of the {{EffectTiming}} dictionary.
@@ -7172,7 +7172,7 @@ Acknowledgements {#acknowledgements}
   for their contributions to this specification.
 
   Thank you also to Michiel “Pomax” Kamermans
-  for help with the equations for a proposed smooth timing function,
+  for help with the equations for a proposed smooth easing function,
   although this feature has been deferred to a subsequent specification.
 
   Our deep gratitude goes out to