Move examples after normative text

css-easing-2/Overview.bs

@@ -135,105 +135,6 @@ The syntax for specifying an [=easing function=] is as follows:
 
 ## The linear easing function: ''linear()'' ## {#the-linear-easing-function}
 
-<div class=example>
-  ''linear()'' allows the definition of easing functions that interpolate linearly between a set of points.
-
-  For example, ''linear(0, 0.25, 1)'' produces an easing function
-  that moves linearly from 0, to 0.25, then to 1:
-
-  <figure>
-    <img class="easing-graph" src="simple-linear-example.svg" width="400"
-      alt="linear(0, 0.25, 1) plotted on a graph">
-  </figure>
-</div>
-<div class=example>
-  By default, values are spread evenly between entries that don't have an explicit "input".
-  Input values can be provided using a <<percentage>>.
-
-  For example, ''linear(0, 0.25 75%, 1)'' produces the following easing function,
-  which spends 75% of the time transitioning from ''0'' to ''.25'',
-  then the last 25% transitioning from ''.25'' to ''1'':
-
-  <figure>
-    <img class="easing-graph" src="linear-with-input-example.svg" width="400"
-      alt="linear(0, 0.25 75%, 1) plotted on a graph.
-        The graph has three points.
-        The first is at 0,0.
-        The second is at 0.75,0.25.
-        The third is at 1,1.">
-  </figure>
-</div>
-<div class=example>
-  If two input values are provided for a single output,
-  it results in two points with the same output.
-
-  For example, ''linear(0, 0.25 25% 75%, 1)''
-  is equivalent to ''linear(0, 0.25 25%, 0.25 75%, 1)'',
-  producing the following easing function:
-
-  <figure>
-    <img class="easing-graph" src="linear-with-double-input-example.svg" width="400"
-      alt="linear(0, 0.25 75%, 1) plotted on a graph.
-        The graph has four points.
-        The first is at 0,0.
-        The second is at 0.25,0.25.
-        The third is at 0.75,0.25.
-        The forth is at 1,1.">
-  </figure>
-</div>
-<div class=example>
-  If the input is outside the range provided,
-  the trajectory of the nearest two points is continued.
-
-  For example, here are the implicit values from the previous function:
-
-  <figure>
-    <img class="easing-graph" src="linear-with-double-input-example-continued.svg" width="400"
-      alt="linear(0, 0.25 75%, 1) plotted on a graph.
-        The graph has four points.
-        The first is at 0,0.
-        The second is at 0.25,0.25.
-        The third is at 0.75,0.25.
-        The forth is at 1,1.
-        The ends of the graph are extended at the angle of the nearest two lines.">
-  </figure>
-</div>
-<div class=example>
-  A typical use of ''linear()'' is to provide many points to create the illusion of a curve.
-
-  For example, here's how ''linear()'' could be used to create a reusable "bounce" easing function:
-
-  ```css
-  :root {
-    --bounce: linear(
-      /* Start to 1st bounce */
-      0, 0.063, 0.25, 0.563, 1 36.4%,
-      /* 1st to 2nd bounce */
-      0.812, 0.75, 0.813, 1 72.7%,
-      /* 2nd to 3rd bounce */
-      0.953, 0.938, 0.953, 1 90.9%,
-      /* 3rd bounce to end */
-      0.984, 1 100% 100%
-    );
-  }
-
-  .example {
-    animation-timing-function: var(--bounce);
-  }
-  ```
-
-  The definition ends `1 100% 100%` to create two final points,
-  so inputs greater than 1 always output 1.
-
-  <figure>
-    <img class="easing-graph" src="linear-bounce-example.svg" width="400"
-      alt="The graph of a rough bounce easing.">
-  </figure>
-
-  More points could be used to create a smoother result,
-  which may be needed for slower animations.
-</div>
-
 A <dfn export>linear easing function</dfn>
 is an [=easing function=]
 that interpolates linearly
@@ -420,6 +321,107 @@ It returns an [=output progress value=].
 
 </section>
 
+### Examples ### {#linear-easing-function-examples}
+
+<div class=example>
+  ''linear()'' allows the definition of easing functions that interpolate linearly between a set of points.
+
+  For example, ''linear(0, 0.25, 1)'' produces an easing function
+  that moves linearly from 0, to 0.25, then to 1:
+
+  <figure>
+    <img class="easing-graph" src="simple-linear-example.svg" width="400"
+      alt="linear(0, 0.25, 1) plotted on a graph">
+  </figure>
+</div>
+<div class=example>
+  By default, values are spread evenly between entries that don't have an explicit "input".
+  Input values can be provided using a <<percentage>>.
+
+  For example, ''linear(0, 0.25 75%, 1)'' produces the following easing function,
+  which spends 75% of the time transitioning from ''0'' to ''.25'',
+  then the last 25% transitioning from ''.25'' to ''1'':
+
+  <figure>
+    <img class="easing-graph" src="linear-with-input-example.svg" width="400"
+      alt="linear(0, 0.25 75%, 1) plotted on a graph.
+        The graph has three points.
+        The first is at 0,0.
+        The second is at 0.75,0.25.
+        The third is at 1,1.">
+  </figure>
+</div>
+<div class=example>
+  If two input values are provided for a single output,
+  it results in two points with the same output.
+
+  For example, ''linear(0, 0.25 25% 75%, 1)''
+  is equivalent to ''linear(0, 0.25 25%, 0.25 75%, 1)'',
+  producing the following easing function:
+
+  <figure>
+    <img class="easing-graph" src="linear-with-double-input-example.svg" width="400"
+      alt="linear(0, 0.25 75%, 1) plotted on a graph.
+        The graph has four points.
+        The first is at 0,0.
+        The second is at 0.25,0.25.
+        The third is at 0.75,0.25.
+        The forth is at 1,1.">
+  </figure>
+</div>
+<div class=example>
+  If the input is outside the range provided,
+  the trajectory of the nearest two points is continued.
+
+  For example, here are the implicit values from the previous function:
+
+  <figure>
+    <img class="easing-graph" src="linear-with-double-input-example-continued.svg" width="400"
+      alt="linear(0, 0.25 75%, 1) plotted on a graph.
+        The graph has four points.
+        The first is at 0,0.
+        The second is at 0.25,0.25.
+        The third is at 0.75,0.25.
+        The forth is at 1,1.
+        The ends of the graph are extended at the angle of the nearest two lines.">
+  </figure>
+</div>
+<div class=example>
+  A typical use of ''linear()'' is to provide many points to create the illusion of a curve.
+
+  For example, here's how ''linear()'' could be used to create a reusable "bounce" easing function:
+
+  ```css
+  :root {
+    --bounce: linear(
+      /* Start to 1st bounce */
+      0, 0.063, 0.25, 0.563, 1 36.4%,
+      /* 1st to 2nd bounce */
+      0.812, 0.75, 0.813, 1 72.7%,
+      /* 2nd to 3rd bounce */
+      0.953, 0.938, 0.953, 1 90.9%,
+      /* 3rd bounce to end */
+      0.984, 1 100% 100%
+    );
+  }
+
+  .example {
+    animation-timing-function: var(--bounce);
+  }
+  ```
+
+  The definition ends `1 100% 100%` to create two final points,
+  so inputs greater than 1 always output 1.
+
+  <figure>
+    <img class="easing-graph" src="linear-bounce-example.svg" width="400"
+      alt="The graph of a rough bounce easing.">
+  </figure>
+
+  More points could be used to create a smoother result,
+  which may be needed for slower animations.
+</div>
+
 <h3 id=the-linear-easing-keyword oldids=linear-timing-function-section>The linear easing keyword: ''linear''</h3>
 
 The <dfn dfn-type=value for=easing-function>linear</dfn> keyword