Re: [css-animations] Specifying how keyframes interact

On Tue, Aug 11, 2015 at 5:27 PM, Dean Jackson <dino@apple.com> wrote:
>> 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?

Yes.

> 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.


Do you mean a global a-t-f like Shane describes in his reply, or some
way to say "use this a-t-f for these keyframes, but give it C¹
continuity with the surrounding timing functions"?

~TJ

Received on Wednesday, 12 August 2015 00:37:45 UTC