Re: [css-animations] Specifying how keyframes interact

> On 25 Jul 2015, at 12:29 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> 
> 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.

That seems to agree with the way we intended it, and have implemented it.

One point about the 'animation' property - I assume you mean the a-t-f of the element that the animation is applying to?

Side note: one of the ideas here was to allow a smooth animation between various keyframes. However, this is extremely difficult to hand-author, because any change in the keyframe duration (i.e. keyframe %) means you need to adjust the timing functions both earlier and later. It might be nice to have a timing function that tells the engine to smooth the animation.

Dean


>      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 Wednesday, 12 August 2015 00:27:56 UTC