Re: [css-animations] Specifying how keyframes interact

> On 12 Aug 2015, at 12:35 PM, Shane Stephens <shans@google.com> wrote:
> 
> 
> On Wed, Aug 12, 2015 at 10:41 AM Dean Jackson <dino@apple.com <mailto:dino@apple.com>> wrote:
>> On 12 Aug 2015, at 10:34 AM, Shane Stephens <shans@google.com <mailto: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.

Are you saying that you map input time through the global function, and then the output of that through the local function, which you then use to calculate the animated value? What do you do if the global function provides output beyond the bounds?

I think that would break existing CSS animations.

Suppose I have

#foo {
  animation-name: fooanim;
  animation-timing-function: global; /* pretend this exists */
  animation-duration: 1s;
}

@keyframes fooanim {

0% {
  animation-timing-function: local1;
}

25% {
}

50% {
}

75% {
  animation-timing-function: local2;
}

100% {
}

}

What do you expect the timing function to be between each of the steps?

I admit that what we have now is awkward in some cases, in that the "global" function doesn't actually apply over the entire animation, but rather is used between each keyframe (unless overridden). We could either have new functions with different behaviour, or a new property to control how the function is applied.

We could also make global smoothing override any intrakeyframe timing function. Or we could say that it smooths between adjacent keyframes that have the same timing function. That would allow you to have a animation that smoothly moves to a point, steps to another point, and smoothly finishes somewhere else.

Dean