[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 <dfn>iteration progress</dfn>.
+      The <dfn>iteration index</dfn> 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).
@@ -3493,7 +3495,7 @@ Time transformations {#time-transformations}
 The iteration progress {#the-iteration-progress}
 ----------------------
 
-  The <dfn>iteration progress</dfn> of an [=animation effect=]
+  The [=iteration progress=] of an [=animation effect=]
   is simply its [=transformed progress=].
 
 
@@ -3516,14 +3518,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>
+  the <dfn>Web Animations [=animation model=]</dfn>
   takes the [=iteration progress=] and [=current iteration=] values
-  produced by the <em>timing model</em>
+  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>
@@ -5173,7 +5175,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