[web-animations-1][editorial] Restructure Section: Active Interval

This edit only adds some text in the first paragraph;
everything else is either moving text or adding subheadings.

Changes:

* Move the illustration to annotate "active interval", the core concept.
  -> This then allows the rest of the definitions to group together below.

* Note up front a bit more how the active interval is calculated,
  so it hangs together by itself above the illustration.

* Add subheadings for each of these terms.

This gives the section more formal structure, which should help support
more complicated definitions in future levels.

Author: fantasai

web-animations-1/Overview.bs

@@ -2602,35 +2602,15 @@ Animation effects {#animation-effects}
   will never return a negative value.
 </div>
 
-### The active interval, duration, and delays ### {#the-active-interval}
+### The active interval ### {#the-active-interval}
 
   [=Animation effects=] define an <dfn>active interval</dfn>,
   which is the period of time during which the effect
   is scheduled to produce its effect
   (excepting [=fill modes=],
   which apply outside the [=active interval=]).
-  Each [=animation effect=] has only one such interval.
-
-  The lower bound of the [=active interval=]
-  by default corresponds to the [=start time=] of the [=associated animation=],
-  but can be shifted by the <dfn>start delay</dfn>,
-  which is a signed offset from the [=start time=] of the [=animation=].
-
-  The length of the [=active interval=] is called the <dfn>active duration</dfn>,
-  and is determined by the [=iteration duration=] and [=iteration count=].
-  Its length determines the upper bound of the [=active interval=].
-
-  <blockquote id="calculating-the-active-duration">
-    [=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.
+  Each [=animation effect=] has only one such interval,
+  which is defined by its [=start delay=] and [=active duration=].
 
   <div class=informative-bg>
 
@@ -2658,6 +2638,33 @@ Animation effects {#animation-effects}
     </figure>
   </div>
 
+#### The start delay #### {#the-start-delay}
+
+  The lower bound of the [=active interval=]
+  by default corresponds to the [=start time=] of the [=associated animation=],
+  but can be shifted by the <dfn>start delay</dfn>,
+  which is a signed offset from the [=start time=] of the [=animation=].
+
+#### The active duration #### {#the-active-duration}
+
+  The length of the [=active interval=] is called the <dfn>active duration</dfn>,
+  and is determined by the [=iteration duration=] and [=iteration count=].
+  Its length determines the upper bound of the [=active interval=].
+
+  <blockquote id="calculating-the-active-duration">
+    [=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.
+
+#### The end delay and animation effect end time #### {#the-end-delay}
+
   Similar to the [=start delay=],
   an [=animation effect=] also has an <dfn>end delay</dfn>,
   which is primarily of use when sequencing one [=animation effect=]