W3C home > Mailing lists > Public > www-style@w3.org > August 2015

Re: [css-animations] Specifying how keyframes interact

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 11 Aug 2015 17:36:58 -0700
Message-ID: <CAAWBYDDK-rkQ7jxuEcWQu30tD0i6Znce43CqnsjphGS-0hFcmQ@mail.gmail.com>
To: Dean Jackson <dino@apple.com>
Cc: www-style list <www-style@w3.org>
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

This archive was generated by hypermail 2.3.1 : Wednesday, 12 August 2015 00:37:45 UTC