[css-animations] Specifying how keyframes interact

According to IRC chatter today, it's unclear to literally everyone how
complex sets of keyframes interact, particularly with regards to
inline animation-timing-functions.  I thought this was clear and
straightforward, but Estelle and dbaron disagreed and thought it
wasn't specified, so I'd like to propose text to clarify how this
works:

The @keyframes rule is a (somewhat obfuscated) way to specify a set of
property transitions that will occur during the animation.  A property
transition is a change in a single property, specifying a start and
end time, a start and end value, and a timing function that dictates
how the property is interpolated over the duration of the transition.

To convert an @keyframes rule into a set of property transitions, run
the following steps:

Create a list of transition endpoints, initially empty.
For every keyframe block, in order:
  For every selector in the keyframe block, in order:
    For every declaration in the keyframe block, in order:
      Create a transition endpoint for the given property, with the
given selector and property value.
      If the keyframe block specifies an a-t-f, give the transition
endpoint that function.
      Otherwise, give it the timing function specified by the
'animation' property invoking the animation.
      Append the transition endpoint to the list of transition endpoints.

Divide the list of transition endpoints into a number of independent
lists according to the property associated with the endpoint,
maintaining the relative order.

Stably sort each list by the selector of each endpoint.  If the same
selector occurs multiple times in a list, discard all but the last.
If a list doesn't have a 0% endpoint, add one with the underlying
value of the property from the element and the default timing function
from the 'animation' property invoking the animation.  Do the same if
a list doesn't have a 100% endpoint.

Create a list of transitions, initially empty.
For each list of transition endpoint:
  For each overlapping pair¹ of transition endpoints in the list:
    Create a property transition for the property, with the start time
and value from the first transition endpoint, end time and value from
the second transition endpoint, and timing function from the first
transition endpoint.
    Append the property transition to the list of transitions.

The list of transitions thus produced defines the animation.

¹ That is, if the the list contains [1, 2, 3, 4], produce the pairs
[1, 2], [2, 3], [3, 4].

~TJ

Received on Saturday, 25 July 2015 02:30:05 UTC