[web-animations-1][editorial] Move “animation frame” section out of the timeline definition

No change to text (except headings).

This section was making it hard to understand the “Timelines” section
because it split the generic dfn from the specific types dfns with
a much more complicated concept relating timelines to animations
and events and other things. This moves it out of the way, and gives
it a higher-level section heading (as it deserves).

Author: fantasai

web-animations-1/Overview.bs

@@ -690,77 +690,6 @@ Timelines {#timelines}
   A [=timeline=] can be
   <dfn lt="timeline associated with a document">associated with a document</dfn>.
 
-  When asked to <dfn export>update animations and send events</dfn>
-  for a {{Document}} |doc| at timestamp |now|,
-  run these steps:
-
-  1. Update the [=timeline/current time=] of all timelines
-      <a lt="timeline associated with a document">associated with |doc|</a>
-      passing |now| as the timestamp.
-
-      <div class=note>
-        Due to the hierarchical nature of the timing model,
-        updating the [=timeline/current time=] of a [=timeline=] also involves:
-
-        * Updating the [=animation/current time=] of any [=animations=]
-            [=associated with a timeline|associated with=] the timeline.
-
-        * Running the [=update an animation's finished state=] procedure
-            for any animations whose [=animation/current time=] has been updated.
-
-        * Queueing [=animation events=] for any such animations.
-      </div>
-
-  1. [=Remove replaced animations=] for |doc|.
-
-  1. [=Perform a microtask checkpoint=].
-
-      Note: This is to ensure that any microtasks queued up
-      as a result of resolving or rejecting Promise objects
-      as part of updating timelines in the previous step,
-      run their callbacks prior to dispatching animation events.
-
-  1. Let |events to dispatch| be a copy of |doc|'s [=pending animation event queue=].
-
-  1. Clear |doc|'s [=pending animation event queue=].
-
-  1. Perform a stable sort of the [=animation events=] in |events to dispatch|
-      as follows:
-
-      1. Sort the events by their [=scheduled event time=]
-          such that events that were scheduled to occur earlier
-          sort before events scheduled to occur later,
-          and events whose scheduled event time is [=unresolved=]
-          sort before events with a [=resolved=]
-          scheduled event time.
-
-      1. Within events with equal [=scheduled event times=],
-          sort by their [=composite order=].
-
-          Note: The purpose of sorting events is to ensure that, as best possible,
-          even on devices with differing capabilities
-          and hence different frame rates,
-          events are dispatched in a consistent order.
-
-          Note: The requirement for the sort to be a stable sort
-          is because sometimes multiple events can be queued
-          with the same scheduled event time.
-          For example, a CSS animation with a duration of zero would dispatch
-          both an <code>animationstart</code> and an <code>animationend</code> event
-          with the same scheuled event time,
-          and the order of these events should be preserved.
-
-  1. [=Dispatch=] each of the events in |events to dispatch| at their
-      corresponding target using the order established in the previous step.
-
-  It is often convenient to describe each time this procedure is invoked
-  as establishing a new <dfn export>animation frame</dfn>.
-  Changes to the timing properties of [=animations=] or [=animation effects=],
-  or the addition and removal of the objects can
-  cause the output of the timing or animation model to change,
-  but these operations in themselves do not create a new [=animation frame=];
-  rather they merely update the current [=animation frame=].
-
 ### Document timelines ### {#document-timelines}
 
   A <dfn export>document timeline</dfn> is a type of [=timeline=]
@@ -793,7 +722,7 @@ Timelines {#timelines}
   return the sum of the |timeline time| and |timeline|'s [=origin time=].
   If |timeline| is inactive, return an [=unresolved=] [=time value=].
 
-### The default document timeline ### {#the-documents-default-timeline}
+#### The default document timeline #### {#the-documents-default-timeline}
 
   Each {{Document}} has a [=document timeline=] called the
   <dfn export for="document">default document timeline</dfn>.
@@ -803,6 +732,8 @@ Timelines {#timelines}
 
   The [=default document timeline=] has an [=origin time=] of zero.
 
+#### Relationship to wall-clock time #### {#document-wallclock-time}
+
 <div class=informative-bg>
 <em>This section is non-normative</em>
 
@@ -822,6 +753,83 @@ Timelines {#timelines}
 
 </div>
 
+Animation Frames {#animation-frame-loop}
+----------------
+
+  <div algorithm>
+    When asked to <dfn export>update animations and send events</dfn>
+    for a {{Document}} |doc| at timestamp |now|,
+    run these steps:
+
+    1. Update the [=timeline/current time=] of all timelines
+        <a lt="timeline associated with a document">associated with |doc|</a>
+        passing |now| as the timestamp.
+
+        <div class=note>
+          Due to the hierarchical nature of the timing model,
+          updating the [=timeline/current time=] of a [=timeline=] also involves:
+
+          * Updating the [=animation/current time=] of any [=animations=]
+              [=associated with a timeline|associated with=] the timeline.
+
+          * Running the [=update an animation's finished state=] procedure
+              for any animations whose [=animation/current time=] has been updated.
+
+          * Queueing [=animation events=] for any such animations.
+
+        </div>
+
+    1. [=Remove replaced animations=] for |doc|.
+
+    1. [=Perform a microtask checkpoint=].
+
+        Note: This is to ensure that any microtasks queued up
+        as a result of resolving or rejecting Promise objects
+        as part of updating timelines in the previous step,
+        run their callbacks prior to dispatching animation events.
+
+    1. Let |events to dispatch| be a copy of |doc|'s [=pending animation event queue=].
+
+    1. Clear |doc|'s [=pending animation event queue=].
+
+    1. Perform a stable sort of the [=animation events=] in |events to dispatch|
+        as follows:
+
+        1. Sort the events by their [=scheduled event time=]
+            such that events that were scheduled to occur earlier
+            sort before events scheduled to occur later,
+            and events whose scheduled event time is [=unresolved=]
+            sort before events with a [=resolved=]
+            scheduled event time.
+
+        1. Within events with equal [=scheduled event times=],
+            sort by their [=composite order=].
+
+            Note: The purpose of sorting events is to ensure that, as best possible,
+            even on devices with differing capabilities
+            and hence different frame rates,
+            events are dispatched in a consistent order.
+
+            Note: The requirement for the sort to be a stable sort
+            is because sometimes multiple events can be queued
+            with the same scheduled event time.
+            For example, a CSS animation with a duration of zero would dispatch
+            both an <code>animationstart</code> and an <code>animationend</code> event
+            with the same scheuled event time,
+            and the order of these events should be preserved.
+
+    1. [=Dispatch=] each of the events in |events to dispatch| at their
+        corresponding target using the order established in the previous step.
+  </div>
+
+  It is often convenient to describe each time this procedure is invoked
+  as establishing a new <dfn export>animation frame</dfn>.
+  Changes to the timing properties of [=animations=] or [=animation effects=],
+  or the addition and removal of the objects can
+  cause the output of the timing or animation model to change,
+  but these operations in themselves do not create a new [=animation frame=];
+  rather they merely update the current [=animation frame=].
+
 Animations {#animations}
 ----------