Re: [css-animations] Specifying how keyframes interact

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

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