[web-animations-1][editorial] Restructure Sections: Animation Effect vs Progress Calculations

This restructuring sorts various subsections into:
* properties of an animation effect
   -> filed as direct subsections of Animation Effect
* transformation of the input time into output progress
   -> filed as direct subsections of Calculating Progress

This way the first section builds up the model of what an Animation Effect *is*,
and the second section defines the flow of time through various transformations into an output progress value.

(See next commit for integration edits; this only moves text.)

Author: fantasai

web-animations-1/Overview.bs

@@ -2868,8 +2868,7 @@ Animation effects {#animation-effects}
   </div>
 
 
-Fill behavior and fill modes {#fill-behavior}
-----------------------------
+### Fill behavior and fill modes ### {#fill-behavior}
 
   The effect of an [=animation effect=] when it is not [=in play=]
   is determined by its <dfn>fill mode</dfn>.
@@ -3010,10 +3009,9 @@ Fill behavior and fill modes {#fill-behavior}
   inside the [=animation effect/active phase=]
   <em>or</em> when a fill is applied.
 
-Repeating {#repeating}
----------
+### Repeating ### {#repeating}
 
-### Iteration intervals ### {#iteration-intervals}
+#### Iteration intervals #### {#iteration-intervals}
 
   It is possible to specify that an animation effect should repeat
   a fixed number of times or indefinitely.
@@ -3063,7 +3061,7 @@ Repeating {#repeating}
   </figure>
 </div>
 
-### Controlling iteration ### {#controlling-iteration}
+#### Controlling iteration #### {#controlling-iteration}
 
   The number of times an [=animation effect=] repeats
   is called its <dfn>iteration count</dfn>.
@@ -3114,7 +3112,7 @@ Repeating {#repeating}
 
 </div>
 
-### Interval timing ### {#interval-timing}
+#### Interval timing #### {#interval-timing}
 
 <div class=informative-bg>
 <em>This section is non-normative</em>
@@ -3167,8 +3165,83 @@ Repeating {#repeating}
 
 </div>
 
-Core animation effect calculations {#core-animation-effect-calculations}
-----------------------------------
+#### Calculating the active duration #### {#calculating-the-active-duration}
+
+  The [=active duration=] is calculated as follows:
+
+  <blockquote>
+    [=active duration=] =
+       <code><a>iteration duration</a> × <a>iteration count</a></code>
+  </blockquote>
+
+  If either the [=iteration duration=] or [=iteration count=] are zero,
+  the [=active duration=] is zero.
+
+  Note: This clarification is needed
+  since the result of infinity multiplied by zero
+  is undefined according to IEEE 754-2008.
+
+### Direction control ### {#direction-control}
+
+  [=Animation effects=] can also be configured
+  to run iterations in alternative directions
+  using direction control.
+  For this purpose, [=animation effects=] have
+  a <dfn>playback direction</dfn> parameter
+  which takes one of the following values:
+
+  *   normal,
+  *   reverse,
+  *   alternate, or
+  *   alternate-reverse.
+
+  The semantics of these values are incorporated into
+  the calculation of the [=directed progress=] which follows.
+
+<div class=informative-bg>
+<em>This section is non-normative</em>
+
+  A non-normative definition of these values is as follows:
+
+  : normal
+  ::
+      All iterations are played as specified.
+
+  : reverse
+  ::
+      All iterations are played in the reverse direction
+      from the way they are specified.
+
+  : alternate
+  ::
+      Even iterations are played as specified;
+      odd iterations are played in the reverse direction
+      from the way they are specified.
+
+  : alternate-reverse
+  ::
+      Even iterations are played in the reverse direction
+      from the way they are specified;
+      odd iterations are played as specified.
+
+</div>
+
+### Time transformations ### {#time-transformations}
+
+  It is often desirable to control the rate
+  at which an [=animation effect=] progresses.
+  For example, easing the rate of animation
+  can create a sense of momentum and produce a more natural effect.
+  The CSS Easing Functions Module [[!CSS-EASING-1]]
+  defines [=timing functions=] for this purpose.
+
+  [=Animation effects=] have
+  one [=timing function=] associated with them.
+  The default [=timing function=]
+  is the [=linear timing function=].
+
+Calculating progress {#core-animation-effect-calculations}
+--------------------
 
 ### Overview ### {#animation-effect-calculations-overview}
 
@@ -3227,32 +3300,11 @@ Core animation effect calculations {#core-animation-effect-calculations}
 
   The first step, calculating the [=local time=]
   is described in [[#local-time-section]].
-  Steps 2 to 4 in the diagram are described in the following sections.
-  Steps 5 and 6 are described in [[#calculating-the-directed-progress]]
-  and [[#calculating-the-transformed-progress]] respectively.
+  Steps 2 to 6 in the diagram are described in the following sections.
 
 </div>
 
-
-### Calculating the active duration ### {#calculating-the-active-duration}
-
-  The [=active duration=] is calculated as follows:
-
-  <blockquote>
-    [=active duration=] =
-       <code><a>iteration duration</a> × <a>iteration count</a></code>
-  </blockquote>
-
-  If either the [=iteration duration=] or [=iteration count=] are zero,
-  the [=active duration=] is zero.
-
-  Note: This clarification is needed
-  since the result of infinity multiplied by zero
-  is undefined according to IEEE 754-2008.
-
-### Transforming the local time ### {#transforming-the-local-time}
-
-#### Calculating the active time #### {#calculating-the-active-time}
+### Calculating the active time ### {#calculating-the-active-time}
 
   The <dfn>active time</dfn> is based on the [=local time=] and [=start delay=].
   However, it is only defined
@@ -3307,7 +3359,7 @@ Core animation effect calculations {#core-animation-effect-calculations}
 
   </dl>
 
-#### Calculating the overall progress #### {#calculating-the-overall-progress}
+### Calculating the overall progress ### {#calculating-the-overall-progress}
 
   The <dfn>overall progress</dfn> describes
   the number of iterations that have completed (including partial iterations)
@@ -3338,7 +3390,7 @@ Core animation effect calculations {#core-animation-effect-calculations}
       <code><var>overall progress</var> + <a>iteration start</a></code>.
 
 
-#### Calculating the simple iteration progress #### {#calculating-the-simple-iteration-progress}
+### Calculating the simple iteration progress ### {#calculating-the-simple-iteration-progress}
 
   The <dfn>simple iteration progress</dfn>
   is a fraction of the progress through the current iteration
@@ -3404,52 +3456,6 @@ Core animation effect calculations {#core-animation-effect-calculations}
 
   1. Otherwise, return <code>floor(<a>overall progress</a>)</code>.
 
-Direction control {#direction-control}
------------------
-
-  [=Animation effects=] can also be configured
-  to run iterations in alternative directions
-  using direction control.
-  For this purpose, [=animation effects=] have
-  a <dfn>playback direction</dfn> parameter
-  which takes one of the following values:
-
-  *   normal,
-  *   reverse,
-  *   alternate, or
-  *   alternate-reverse.
-
-  The semantics of these values are incorporated into
-  the calculation of the [=directed progress=] which follows.
-
-<div class=informative-bg>
-<em>This section is non-normative</em>
-
-  A non-normative definition of these values is as follows:
-
-  : normal
-  ::
-      All iterations are played as specified.
-
-  : reverse
-  ::
-      All iterations are played in the reverse direction
-      from the way they are specified.
-
-  : alternate
-  ::
-      Even iterations are played as specified;
-      odd iterations are played in the reverse direction
-      from the way they are specified.
-
-  : alternate-reverse
-  ::
-      Even iterations are played in the reverse direction
-      from the way they are specified;
-      odd iterations are played as specified.
-
-</div>
-
 ### Calculating the directed progress ### {#calculating-the-directed-progress}
 
   The <dfn>directed progress</dfn> is calculated
@@ -3493,21 +3499,6 @@ Direction control {#direction-control}
       Otherwise, return
       <code>1.0 − <a>simple iteration progress</a></code>.
 
-Time transformations {#time-transformations}
---------------------
-
-  It is often desirable to control the rate
-  at which an [=animation effect=] progresses.
-  For example, easing the rate of animation
-  can create a sense of momentum and produce a more natural effect.
-  The CSS Easing Functions Module [[!CSS-EASING-1]]
-  defines [=timing functions=] for this purpose.
-
-  [=Animation effects=] have
-  one [=timing function=] associated with them.
-  The default [=timing function=]
-  is the [=linear timing function=].
-
 ### Calculating the transformed progress ### {#calculating-the-transformed-progress}
 
   The <dfn export>transformed progress</dfn> is calculated
@@ -3533,10 +3524,9 @@ Time transformations {#time-transformations}
       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>.
 
-The iteration progress {#the-iteration-progress}
-----------------------
+### Yielding the iteration progress ### {#the-iteration-progress}
 
-  The <dfn>iteration progress</dfn> of an [=animation effect=]
+  The final output <dfn>iteration progress</dfn> of an [=animation effect=]
   is simply its [=transformed progress=].