[css-timing] Add frames() timing function

Based on many discussions about this on the www-style list, the latest
concluding here:

  https://lists.w3.org/Archives/Public/www-style/2016Mar/0199.html

Author: birtles

css-animations/Overview.bs

@@ -47,6 +47,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/webappapis.html; type: dfn; sp
     text: event handler IDL attributes
 urlPrefix: https://html.spec.whatwg.org/multipage/infrastructure.html; type: dfn; spec: html
     text: HTML elements
+url: https://drafts.csswg.org/css-timing-1/#after-flag; type: dfn; text: after flag; spec: css-timing
 </pre>
 <pre class="link-defaults">
 spec:cssom-1; type:interface; text:CSSRule
@@ -571,6 +572,8 @@ The 'animation-timing-function' property</h3>
 	The <a spec=css-timing>input progress value</a> used is the percentage
 	of the time elapsed between the current keyframe and the next keyframe
 	<em>after</em> incorporating the effect of the 'animation-direction' property.
+	The <a spec=css-timing>after flag</a> is true when the animation has ended
+	and is false otherwise.
 
 	During the 'animation-delay', the 'animation-timing-function' is not applied.
 

css-timing/Overview.bs

@@ -86,7 +86,7 @@ range [-∞, ∞].
 Some types of timing function also take an additional boolean [=before flag=]
 input which is defined subsequently.
 
-This specification defines three types of timing functions whose definitions
+This specification defines four types of timing functions whose definitions
 follow.
 
 
@@ -203,7 +203,7 @@ Step timing functions {#step-timing-functions}
 
 A <dfn>step timing function</dfn> is a type of <a>timing function</a>
 that divides the input time into a specified number of intervals that
-are equal in duration.
+are equal in length.
 
 Some example step timing functions are illustrated below.
 
@@ -301,6 +301,69 @@ The meaning of each value is as follows:
 
 </dl>
 
+Frames timing functions {#frames-timing-functions}
+-----------------------
+
+A <dfn>frames timing function</dfn> is a type of <a>timing function</a>
+that divides the input time into a specified number of intervals of equal
+length, each of which is associated with an <a>output progress value</a> of
+increasing value.
+The difference between a [=frames timing function=] and a [=step timing
+function=] is that a frames timing function returns the [=output progress
+values=] 0 and 1 for an equal portion of the [=input progress values=] in
+the range [0, 1].
+This makes it suitable, for example, for using in animation loops where the
+animation should display the first and last frame of the animation for an equal
+amount of time as each other frame during each loop.
+
+Some example frames timing functions are illustrated below.
+
+<figure>
+  <img src="frames-timing-func-examples.svg" width="500"
+      alt="Example frames timing functions.">
+  <figcaption>
+    Example frames timing functions.
+    In each case the domain is the input progress whilst the range
+    represents the output progress produced by the function.
+  </figcaption>
+</figure>
+
+A [=frames timing function=] is defined by an integral number of
+<dfn>frames</dfn> greater than one.
+
+As with [=step timing functions=], at the exact point where a step occurs the
+result of the function is conceptually the top of the step.
+An additional <dfn>after flag</dfn> passed as input to the [=step timing
+function=], if true, will cause the result of the function to correspond to
+the bottom of the step at the step point.
+
+The [=output progress value=] is calculated from the [=input progress value=]
+and [=after flag=] as follows:
+
+1.   Calculate the <var>current frame</var> as <code>floor([=input progress
+     value=] &times; [=frames=])</code>.
+
+1.   If <em>both</em> of the following conditions are true:
+
+     *   the [=after flag=] is set, <em>and</em>
+     *   [=input progress value=] &times; [=frames=] mod 1 equals zero
+         (that is, if [=input progress value=] &times; [=frames=] is
+         integral), then
+
+     decrement <var>current frame</var> by one.
+
+1.   The [=output progress value=] is <code><var>current frame</var>
+     / ([=frames=] - 1)</code>.
+
+The syntax for specifying a frames timing function is as follows:
+
+<div class="prod"><dfn type>&lt;frames-timing-function&gt;</dfn> =
+  <span class="atom"><dfn lt="frames()" function>frames(<<integer>>)</dfn></span></div>
+
+The parameter to the function specifies the number of [=frames=].
+It must be a positive integer greater than 1.
+
+
 The &lt;single-timing-function&gt; production {#single-timing-function-production}
 =============================================
 
@@ -309,7 +372,8 @@ The syntax for specifying a [=timing function=] is as follows:
 <div class="prod"><dfn type>&lt;single-timing-function&gt;</dfn> =
   ''linear'' |
   <<cubic-bezier-timing-function>> |
-  <<step-timing-function>></div>
+  <<step-timing-function>> |
+  <<frames-timing-function>></div>
 
 Serialization {#serializing-a-timing-function}
 -------------