Re: [css-animations] Specifying how keyframes interact

On Wed, Aug 12, 2015 at 12:49 PM Dean Jackson <dino@apple.com> wrote:

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

Yup.


> What do you do if the global function provides output beyond the bounds?
>

We've defined reasonable linear extensions. In practice this happens
rarely, but linear extensions seem to provide the correct behaviour.


> 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 wouldn't do it that way - that would break existing content :P

Instead, I'd introduce a new property (animation-global-timing-function or
similar), as I mentioned above.


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

Yup. Although I think the 'new functions with different behaviour' route is
going to lead to some weird corner cases.


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

That's getting more complex too. A single, global slot for a smoothing
timing function is probably simplest (and will still allow steps to step,
because of the stacking).

Cheers,
    -Shane

Dean
>
>
>