[css-transitions] Make transitions refer to new CSS Timing Functions spec

Author: birtles

css-timing/Overview.bs

@@ -302,7 +302,7 @@ The meaning of each value is as follows:
     for="steps()">end</dfn>, and specifies the <var>step position</var>.
     If the second parameter is omitted, it is given the value ''end''.
 
-</dfn>
+</dl>
 
 The &lt;single-timing-function&gt; production {#single-timing-function-production}
 =============================================

css-transitions/Overview.bs

@@ -100,6 +100,8 @@ spec:css-color-3;
         text:blue
         text:transparent
 spec:css-values-3; type:type; text:<time>
+spec:css-timing-1; type:type; for:step-timing-function; text:<single-timing-function>
+spec:css-timing-1; type:type; for:<step-timing-function>; text:<single-timing-function>
 </pre>
 <!-- FIXME: These overrides aren't great for dev/TR switching -->
 <pre class="anchors">
@@ -121,7 +123,31 @@ urlPrefix: https://html.spec.whatwg.org/multipage/infrastructure.html; type: dfn
     text: dispatch; url: concept-event-dispatch
 url: https://html.spec.whatwg.org/#document; type: interface; text: Document; spec: html
 </pre>
-</dl>
+
+<!-- FIXME: This is only here until css-timing gets added to the biblio data -->
+<pre class=biblio>
+{
+  "CSS-TIMING": {
+    "title": "CSS Timing Functions Level 1",
+    "authors": [
+      "Brian Birtles",
+      "Dean Jackson",
+      "Matt Rakow",
+      "Shane Stephens"
+    ],
+    "date": "2017",
+    "publisher": "W3C",
+    "status": "ED",
+    "href": "https://drafts.csswg.org/css-timing/",
+    "deliveredBy": [
+      {
+        "shortname": "csswg",
+        "url": "https://www.w3.org/Style/CSS/"
+      }
+    ]
+  }
+}
+</pre>
 
 Introduction {#introduction}
 ============================
@@ -336,73 +362,18 @@ Introduction {#introduction}
         describes how the intermediate values used during a transition will be
         calculated. It allows for a transition to change speed over its
         duration. These effects are commonly called <em>easing</em> functions.
-        In either case, a mathematical function that provides a smooth curve is
-        used.
-      </p>
-      <p>
-        Timing functions are either defined as a stepping function or
-        a <a
-        href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
-        B&eacute;zier curve</a>.
-        The timing function takes as its input
-        the current elapsed percentage of the transition duration
-        and outputs the percentage of the way the transition is
-        from its start value to its end value.
-        How this output is used is defined by
-        the <a href="#animatable-types">interpolation rules</a>
-        for the value type.
       </p>
       <p>
-        A <a href="http://en.wikipedia.org/wiki/Step_function">stepping</a>
-        function is defined by a number that divides the domain of operation
-        into equally sized intervals. Each subsequent interval is a equal step
-        closer to the goal state. The function also specifies whether the
-        change in output percentage happens at the start or end of the
-        interval (in other words, if 0% on the input percentage is the point
-        of initial change).
-      </p>
-      <div class="figure">
-        <img src="step.png" alt="The step timing function splits
-          the function domain into a number of disjoint straight line
-          segments. steps(1, start) is a function whose
-          output value is 1 for all input values. steps(1, end) is a function whose
-          output value is 0 for all input values less than 1, and output
-          is 1 for the input value of 1. steps(3, start) is a function that
-          divides the input domain into three segments, each 1/3 in length,
-          and 1/3 above the previous segment, with the first segment starting
-          at 1/3. steps(3, end) is a function that
-          divides the input domain into three segments, each 1/3 in length,
-          and 1/3 above the previous segment, with the first segment starting
-          at 0.">
-      </div>
-      <p class="caption">
-        Step timing functions
-      </p>
-      <p>
-        A <a
-        href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
-        B&eacute;zier curve</a> is defined by four control points, P<sub>0</sub>
-        through P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub>
-        are always set to (0,0) and (1,1). The 'transition-timing-function' property is used
-        to specify the values for points P<sub>1</sub> and P<sub>2</sub>. These
-        can be set to preset values using the keywords listed below, or can be
-        set to specific values using the ''cubic-bezier()'' function.
-        In the ''cubic-bezier()'' function, P<sub>1</sub> and
-        P<sub>2</sub> are each specified by both an X and Y value.
-      </p>
-      <div class="figure">
-        <img src="TimingFunction.png" alt="The B&eacute;zier timing function is a
-          smooth curve from point P0 = (0,0) to point P3 = (1,1). The
-          length and orientation of the line segment P0-P1 determines
-          the tangent and the curvature of the curve at P0 and the
-          line segment P2-P3 does the same at P3.">
-      </div>
-      <p class="caption">
-        B&eacute;zier Timing Function Control Points
+        Timing functions are defined in the separate CSS Timing Functions module
+        [[!css-timing]].
+        The <a spec=css-timing>input progress value</a> used is the percentage
+        of the transition duration, and the <a spec=css-timing>output progress
+        value</a> is used as the <var>p</var> value when applying the <a
+        href="#animatable-types">interpolation rules</a> for the value type.
       </p>
       <pre class="propdef">
         Name: transition-timing-function
-        Value: <<single-transition-timing-function>> #
+        Value: <<single-timing-function>> #
         Initial: ''transition-timing-function/ease''
         Applies to: all elements, ::before and ::after pseudo elements
         Inherited: no
@@ -412,81 +383,7 @@ Introduction {#introduction}
         Computed value: Same as specified value.
         Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
       </pre>
-      <div class="prod">
-        <dfn type id="single-transition-timing-function">&lt;single-transition-timing-function&gt;</dfn> = ''ease'' | ''linear'' | ''ease-in'' | ''ease-out'' | ''ease-in-out'' | ''step-start'' | ''step-end'' | <a lt="steps()" function>steps</a>(<<integer>>[, [ ''start'' | ''end'' ] ]?) | <a lt="cubic-bezier()" function>cubic-bezier</a>(<<number>>, <<number>>, <<number>>, <<number>>)
-      </div>
-      <p>
-        The timing functions have the following definitions.
-      </p>
-      <dl dfn-type="value" dfn-for="transition-timing-function, <single-transition-timing-function>">
-        <dt><dfn>ease</dfn></dt>
-        <dd>
-          The ease function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0.25, 0.1, 0.25, 1)</a>.
-        </dd>
-        <dt><dfn>linear</dfn></dt>
-        <dd>
-          The linear function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0, 0, 1, 1)</a>.
-        </dd>
-        <dt><dfn>ease-in</dfn></dt>
-        <dd>
-          The ease-in function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0.42, 0, 1, 1)</a>.
-        </dd>
-        <dt><dfn>ease-out</dfn></dt>
-        <dd>
-          The ease-out function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0, 0, 0.58, 1)</a>.
-        </dd>
-        <dt><dfn>ease-in-out</dfn></dt>
-        <dd>
-          The ease-in-out function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0.42, 0, 0.58, 1)</a>.
-        </dd>
-        <dt><dfn>step-start</dfn></dt>
-        <dd>
-          The step-start function is equivalent to <a lt="steps()" function>steps(1, start)</a>.
-        </dd>
-        <dt><dfn>step-end</dfn></dt>
-        <dd>
-          The step-end function is equivalent to <a lt="steps()" function>steps(1, end)</a>.
-        </dd>
-        <dt><dfn function lt="steps()">steps(<<integer>>[, [ start | end ] ]?)</dfn></dt>
-        <dd>
-          Specifies a stepping function, described above, taking two
-          parameters. The first parameter specifies the number of intervals
-          in the function. It must be a positive integer (greater than 0).
-          The second parameter, which is optional, is
-          either the value <dfn value for="steps()">start</dfn> or <dfn value for="steps()">end</dfn>, and specifies the point
-          at which the change of values occur within the interval.
-          If the second parameter is omitted, it is given the value ''end''.
-        </dd>
-        <dt><dfn function lt="cubic-bezier()">cubic-bezier(<<number>>, <<number>>, <<number>>, <<number>>)</dfn></dt>
-        <dd>
-          Specifies a <a
-          href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">cubic-bezier
-          curve</a>. The four values specify points P<sub>1</sub> and
-          P<sub>2</sub> of the curve as (<var>x1</var>, <var>y1</var>, <var>x2</var>, <var>y2</var>). Both x values must be
-          in the range [0, 1] or the definition is invalid. The y values can
-          exceed this range.
-        </dd>
-      </dl>
-
-### Serializing a timing function ### {#serializing-a-timing-function}
-
-      Timing functions are serialized using the common serialization patterns
-      defined in [[CSSOM]] with the following additional requirements:
-
-      *   The keyword values ''ease'', ''linear'', ''ease-in'', ''ease-out'',
-          and ''ease-in-out'' are serialized as-is, that is, they are
-          <em>not</em> converted to the equivalent ''cubic-bezier()''
-          function before serializing.
-
-      *   Step timing functions, whether they are specified using the
-          ''steps()'' function or either of the ''step-start'' or ''step-end''
-          keywords, are serialized as follows:
-
-          1.   If the point at which the value changes is ''end'', serialize
-               as <a lt="steps()" function>steps(&lt;integer&gt;)</a>.
-
-          2.   Otherwise, serialize as <a lt="steps()"
-               function>steps(&lt;integer&gt;, start)</a>.
+
 
 <span id="the-transition-delay-property-">The 'transition-delay' Property</span> {#transition-delay-property}
 -------------------------------------------------------------------------------------------------------------
@@ -530,7 +427,7 @@ Introduction {#introduction}
       </pre>
 
       <div class="prod">
-        <dfn type id="single-transition">&lt;single-transition&gt;</dfn> = [ ''transition-property/none'' | <<single-transition-property>> ] || <<time>> || <<single-transition-timing-function>> || <<time>>
+        <dfn type id="single-transition">&lt;single-transition&gt;</dfn> = [ ''transition-property/none'' | <<single-transition-property>> ] || <<time>> || <<single-timing-function>> || <<time>>
       </div>
 
       <p>