[web-animations-1][editorial] Proper dfns for the timing model and animation model.

Also better cross-linking.

Author: fantasai

web-animations-1/Overview.bs

@@ -459,39 +459,41 @@ Specification conventions {#spec-conventions}
 Web Animations model overview {#web-animations-model-overview}
 =============================
 
-<div class=informative-bg>
-<em>This section is non-normative</em>
-
   At a glance, the [=Web Animations model=] consists
   of two largely independent pieces:
-  a <em>timing model</em> and an <em>animation model</em>.
+  a [=timing model=] and an [=animation model=].
   The roles of these pieces are as follows:
 
-  : Timing model
+  : <dfn id="timing-model-dfn">timing model</dfn>
   ::
       Takes a moment in time and converts it to a proportional distance
       within a single iteration of an animation,
-      called the <em>iteration progress</em>.
-      The <em>iteration index</em> is also recorded
+      called the [=iteration progress=].
+      The current [=iteration index=] is also recorded
       since some animations vary each time they repeat.
+      The [=Web Animations timing model=] is defined in [[#timing-model]].
 
-  : Animation model
+  : <dfn id="animation-model-dfn">animation model</dfn>.
   ::
-      Takes the <em>iteration progress</em> and <em>iteration index</em> values
-      produced by the timing model
-      and converts them into a series of values
-      to apply to the target properties.
+      Takes the [=iteration progress=] and [=iteration index=] values
+      produced by the [=timing model=]
+      and converts them into a series of corresponding values
+      to apply to the [=target properties=].
+      The [=Web Animations animation model=] is defined in [[#animation-model]].
+
+<div class=informative-bg>
+<em>This section is non-normative</em>
 
   Graphically, this flow can be represented as follows:
   <figure>
     <img src="images/timing-and-animation-models.svg" width="600"
       alt="Overview of the operation of the Web Animations model.">
     <figcaption>
-      Overview of the operation of the Web Animations model.<br>
-      The current time is input to the timing model
-      which produces an iteration progress value and an iteration index.<br>
-      These parameters are used as input to the animation model
-      which produces the property values to apply.
+      Overview of the operation of the [=Web Animations model=].<br>
+      The current time is input to the [=timing model=]
+      which produces an [=iteration progress=] value and an [=iteration index=].<br>
+      These parameters are used as input to the [=animation model=]
+      which produces the [=target property=] values to apply.
     </figcaption>
   </figure>
 
@@ -502,14 +504,14 @@ Web Animations model overview {#web-animations-model-overview}
   * takes 2 seconds every time, and
   * changes the width of a rectangle from 50 pixels to 100 pixels.
 
-  The first three points apply to the timing model:
+  The first three points describe the [=timing model=]:
   at a time of 6 seconds, it calculates that the animation should be
   half-way through its second iteration
   and produces the result 0.5.
   The animation model then uses that information to calculate a width.
 
-  This specification begins with the timing model
-  and then proceeds to the animation model.
+  This specification begins with the [[#timing-model|timing model]]
+  and then proceeds to the [[#animation-model|animation model]].
 </div>
 
 <!--
@@ -526,10 +528,10 @@ Timing model {#timing-model}
 ============
 
   This section describes and defines the behavior
-  of the Web Animations timing model.
+  of the <dfn>Web Animations [=timing model=]</dfn>.
 
-Timing model overview {#timing-model-overview}
----------------------
+Timing model characteristics {#timing-model-overview}
+----------------------------
 
 <div class=informative-bg>
 <em>This section is non-normative</em>
@@ -539,8 +541,8 @@ Timing model overview {#timing-model-overview}
 
 ### Stateless ### {#stateless}
 
-  The Web Animations timing model operates by taking an input time
-  and producing an output iteration progress.
+  The Web Animations [=timing model=] operates by taking an input time
+  and producing an output [=iteration progress=].
   Since the output is based solely on the input time
   and is independent of previous inputs,
   the model can be described as stateless.
@@ -1988,7 +1990,7 @@ Waiting for the associated effect</h4>
 
 <div class=informative-bg>
   The rate of play of an animation can be controlled
-  by setting its <em>playback rate</em>.
+  by setting its [=playback rate=].
   For example, setting a playback rate of 2 will cause
   the animation's [=animation/current time=]
   to increase at twice the rate of its [=timeline=].
@@ -2070,7 +2072,7 @@ Waiting for the associated effect</h4>
 
   In order to produce seamless changes to
   the [=playback rate=] of an [=animation=],
-  animation's may have a <dfn>pending playback rate</dfn>
+  animations may have a <dfn>pending playback rate</dfn>
   that defines a playback rate to be applied
   after any necessary synchronization has taken place
   (for the case of animations running in a different thread or process).
@@ -2923,9 +2925,9 @@ Repeating {#repeating}
   is called an <dfn>iteration interval</dfn>.
 
   Unlike the [=active interval=],
-  an animation effect can have multiple [=iteration intervals=]
+  an animation effect can have multiple [=iteration intervals=],
   although typically only the interval corresponding
-  to the [=current iteration=]
+  to the current iteration
   is of interest.
 
   The length of a single iteration is called
@@ -3344,9 +3346,10 @@ Core animation effect calculations {#core-animation-effect-calculations}
   1. Return |simple iteration progress|.
 
 
-### Calculating the current iteration ### {#calculating-the-current-iteration}
+### Calculating the [=current iteration index=] ### {#calculating-the-current-iteration}
 
-  The <dfn>current iteration</dfn> can be calculated
+  The <dfn lt="current iteration index | iteration index">current iteration index</dfn>
+  can be calculated
   using the following steps:
 
   1. If the [=active time=] is [=unresolved=],
@@ -3431,7 +3434,7 @@ Direction control {#direction-control}
 
       : Otherwise,
       ::
-          1. Let |d| be the [=current iteration=].
+          1. Let |d| be the [=current iteration index=].
 
           1. If [=playback direction=] is <code>alternate-reverse</code>
               increment |d| by 1.
@@ -3516,14 +3519,14 @@ Animation model {#animation-model}
 <em>This section is non-normative</em>
 
   For some kinds of [=animation effects=],
-  the Web Animations <em>animation model</em>
-  takes the [=iteration progress=] and [=current iteration=] values
-  produced by the <em>timing model</em>
+  the <dfn>Web Animations [=animation model=]</dfn>
+  takes the [=iteration progress=] and [=iteration index=] values
+  produced by the [=Web Animations timing model|timing model=]
   and uses them to calculate a corresponding output.
 
   The output of each such animation effect
   is then combined with that of others using an [=effect stack=]
-  before being applied to the target properties
+  before being applied to the [=target properties=]
   (see [[#combining-effects]]).
 
 </div>
@@ -3537,7 +3540,7 @@ Introduction {#introduction-to-the-animation-model}
   <dfn lt="target property">target properties</dfn>.
 
   Given an [=iteration progress=],
-  a [=current iteration=],
+  an [=iteration index=],
   and an [=underlying value=],
   an [=animation effect=] produces an <dfn>effect value</dfn>
   for each [=animatable=] [=target property=]
@@ -3902,7 +3905,7 @@ Keyframe effects {#keyframe-effects}
   The [=effect value=] of a single property referenced by a [=keyframe effect=]
   as one of its [=target property|target properties=],
   for a given |iteration progress|,
-  <var ignore>current iteration</var>
+  <var ignore>iteration index</var>
   and |underlying value|
   is calculated as follows.
 
@@ -4093,16 +4096,16 @@ Keyframe effects {#keyframe-effects}
 
   <div class=issue>
     In the presence of certain timing functions,
-    the input iteration progress to an animation effect
+    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]
     and property values are simply extrapolated
-    for input iteration progress values outside this range.
+    for input [=iteration progress=] values outside this range.
 
     We have considered removing this restriction
     since some cases exist where it is useful
     to be able to specify non-linear changes in property values
-    at iteration progress values outside the range [0, 1].
+    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
     that makes it temporarily interpolate “beyond” yellow to red
@@ -5173,7 +5176,7 @@ The {{AnimationEffect}} interface {#the-animationeffect-interface}
   ::
       The [=animation effect=]’s [=iteration start=] property,
       which is a finite real number greater than or equal to zero
-      representing the iteration index at which the [=animation effect=] begins
+      representing the [=iteration index=] at which the [=animation effect=] begins
       and its progress through that iteration.
 
       For example, a value of 0.5 indicates that
@@ -5195,7 +5198,7 @@ The {{AnimationEffect}} interface {#the-animationeffect-interface}
         are typically only useful in combination with an animation effect
         that has an [=iteration composite operation=] of
         <span class="enum-value">accumulate</span>
-        or when the [=current iteration=] index is otherwise significant.
+        or when the [=current iteration index=] is otherwise significant.
       </div>
 
   : <dfn>iterations</dfn>
@@ -5392,7 +5395,7 @@ The {{AnimationEffect}} interface {#the-animationeffect-interface}
 
   : <dfn>currentIteration</dfn>
   ::
-      The [=current iteration=] index
+      The [=current iteration index=]
       beginning with zero for the first iteration.
 
       In most cases this will be a (positive) integer.
@@ -5401,7 +5404,7 @@ The {{AnimationEffect}} interface {#the-animationeffect-interface}
       the value will be positive <code class=esvalue>Infinity</code>.
 
       As with [=unresolved=] times,
-      an unresolved [=current iteration=] is represented
+      an unresolved [=iteration index=] is represented
       by a `null` value.
 
   </div>