Re: [css-animations] Specifying how keyframes interact

On Wed, Aug 12, 2015 at 10:41 AM Dean Jackson <dino@apple.com> wrote:

> On 12 Aug 2015, at 10:34 AM, Shane Stephens <shans@google.com> wrote:
>
> 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.
>>
>
> The web animations spec has this! (specifically, a global timing function
> that extends across the animation rather than between keyframes)
>
>
> Yes, it's nice.
>
>
> I'd love to see it in CSS too as it's really useful. I suppose we'd need a
> new animation-global-timing-function property or similar? Updating the
> shorthand would be .. interesting .. too.
>
>
> I don't think we'd need a new property, just new keywords. Let's say e.g.
> smooth-ease-in-out (not an actual proposal yet). That would operate over
> the largest possible range of keyframes. That is hopefully all of them,
> except if a keyframe does explicitly specify a timing function.
>

Web animations stacks in this scenario (i.e. the global timing function
applies, then the local one). I think this provides more understandable
behaviour.

Cheers,
    -Shane


>
> Dean
>
>
>
> Cheers,
>     -Shane
>
>
>>
>> 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
>> >
>>
>>
>>