Examples

css-easing-2/Overview.bs

@@ -134,10 +134,100 @@ The syntax for specifying an [=easing function=] is as follows:
 
 ## The linear easing function: ''linear()'' ## {#the-linear-easing-function}
 
-<div class=note>
-  ''linear()'' allows developers to define their own easing using a series of points that are interpolated linearly.
+<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:
+
+  <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>
 
-  TODO: expand note
+  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>
@@ -293,7 +383,7 @@ Note: TODO explain this with diagrams
 1.   If |pointAIndex| is equal to |points| [=list/size=] minus 1,
      decrement |pointAIndex| by 1.
 
-     Note: This ensures we have a next [=linear easing point|point=] to compare to.
+     Note: This ensures we have a "next" [=linear easing point|point=] to compare to.
 
 1.   Let |pointA| be |points|[pointAIndex].
 
@@ -318,7 +408,8 @@ Note: TODO explain this with diagrams
 
 <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 is shorthand for <a lt="linear()" function>linear(0, 1)</a>.
+The <dfn dfn-type=value for=easing-function>linear</dfn> keyword is a shorthand
+for <a lt="linear()" function>linear(0, 1)</a>.
 
 <h3 id=cubic-bezier-easing-functions oldids=cubic-bezier-timing-functions>Cubic
 B&eacute;zier easing functions: