[css-easing-2][editorial] Rewrite the jump-* section for clarity.

Author: tabatkins

css-easing-2/Overview.bs

@@ -713,7 +713,7 @@ It has the following syntax:
 <pre class="prod">
   <dfn>&lt;step-easing-function></dfn> = ''step-start'' | ''step-end'' | <<steps()>>
 
-  <dfn>steps()</dfn> = steps( <<integer>>, <<step-position>> ?)
+  <dfn>steps()</dfn> = steps( <<integer>>, <<step-position>>?)
   <dfn type>&lt;step-position></dfn> = ''jump-start'' | ''jump-end'' | ''jump-none'' | ''jump-both''
                 | ''start'' | ''end''
 </pre>
@@ -745,31 +745,47 @@ The meaning of each value is as follows:
       </figure>
 
   :   ''steps( &lt;integer&gt;, &lt;step-position&gt;? )''
-  ::  The first parameter specifies the number of intervals in the function.
-      It must be a positive integer greater than 0
-      unless the second parameter is <a value for="steps()">jump-none</a>
-      in which case it must be a positive integer greater than 1.
-
-      The second parameter, which is optional, specifies the [=step position=]
-      using one of the following values:
-
-      <dl dfn-type=value dfn-for="<step-position>, steps()">
-        :   <dfn>jump-start</dfn>
-        ::  The first rise occurs at [=input progress value=] of 0.
-        :   <dfn>jump-end</dfn>
-        ::  The last rise occurs at [=input progress value=] of 1.
-        :   <dfn>jump-none</dfn>
-        ::  All rises occur within the range (0, 1).
-        :   <dfn>jump-both</dfn>
-        ::  The first rise occurs at [=input progress value=] of 0
-            and the last rise occurs at [=input progress value=] of 1.
-        :   <dfn>start</dfn>
-        ::  Behaves as ''jump-start''.
-        :   <dfn>end</dfn>
-        ::  Behaves as ''jump-end''.
-      </dl>
-
-      If the second parameter is omitted, the value ''end'' is assumed.
+  :: Divides the input interval into a number of equal steps
+    specified by the <<integer>>.
+    Within each interval, the [=output progress value=] is constant,
+    and is determined according to the <<step-position>> keyword.
+    If omitted, the <<step-position>> keyword defaults to ''end''.
+
+    If the <<step-position>> is ''jump-none'',
+    the <<integer>> must be at least 2,
+    or the function is invalid.
+    Otherwise,
+    the <<integer>> must be at least 1,
+    or the function is invalid.
+
+    The <<step-position>> keywords are:
+
+    <dl dfn-type=value dfn-for="<step-position>, steps()">
+      : <dfn>jump-start</dfn>
+      :: The first interval has an [=output progress value=] of <code>1/steps</code>,
+        and subsequent intervals rise by <code>1/steps</code>.
+
+        (It "jumps at the start", with no step returning 0.)
+      : <dfn>jump-end</dfn>
+      :: The first interval has an [=output progress value=] of <code>0</code>,
+        and subsequent intervals rise by <code>1/steps</code>.
+
+        (It "jumps at the end", with no step returning 1.)
+      : <dfn>jump-none</dfn>
+      :: The first interval has an [=output progress value=] of <code>0</code>,
+        and subsequent intervals rise by <code>1/(steps-1)</code>.
+
+        (It "never jumps", with steps returning both 0 and 1.)
+      : <dfn>jump-both</dfn>
+      :: The first interval has an [=output progress value=] of <code>1/(steps+1)</code>,
+        and subsequent intervals rise by <code>1/(steps+1)</code>.
+
+        (It "jumps at both ends", with no steps returning 0 or 1.)
+      : <dfn>start</dfn>
+      ::  Behaves as ''jump-start''.
+      : <dfn>end</dfn>
+      ::  Behaves as ''jump-end''.
+    </dl>
 </dl>
 
 The ''jump-*'' keywords values are illustrated below:
@@ -793,8 +809,10 @@ The ''jump-*'' keywords values are illustrated below:
       <tr><td>''steps(3, jump-none)''<td><div class=easing-track style="--easing:steps(3, jump-none)"></div>
       <tr><td>''steps(3, jump-both)''<td><div class=easing-track style="--easing:steps(3, jump-both)"></div>
   </table>
-  <figcaption>
+  <figcaption style="max-width: 80%;">
     The above easing functions in action, with a ''linear'' provided for comparison.
+    Each ''steps(3, ...)'' function divides the animation into three constant periods;
+    they differ only on what the value is within each period.
   </figcaption>
 </figure>