W3C home > Mailing lists > Public > www-style@w3.org > May 2016

Re: [css-animations] Should really a reversed animation use the reversed timing function?

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 25 May 2016 17:29:58 -0700
Message-ID: <CAAWBYDBaD20ueS09xhuDZBbMVkoVhiE0uzyY8OdkPZ6i_j4d5Q@mail.gmail.com>
To: Hr Gwea <hrg.wea@gmail.com>
Cc: www-style list <www-style@w3.org>
On Tue, May 24, 2016 at 10:38 AM, Hr Gwea <hrg.wea@gmail.com> wrote:
> The current draft says the following about reversed animations:
> "When an animation is played in reverse the timing functions are also reversed"
>
> Assuming that current browsers' implementation of the draft are correct, then when using animation-direction:alternate what happens is the following (tested on Chrome and Firefox):
>
>
> i.e. the timing function (which in this case is approximately a cubic-bezier(1,0,1,0)) is reversed into a cubic-bezier(0,1,0,1).
> At first I doubted that this was the intended meaning of "reversed timing function", but seeing that Chrome and Firefox do the same, I guess that must be it.
>
> However, I wonder, wouldn't it be more useful and intuitive to do it like this:
> i.e. to use the same timing function as is, without reversing it.

No, because then the animation wouldn't be playing in reverse.  It
would be an animation with the values swapped.  While that's
potentially useful, it's not a "reversed animation".

> Let me show you an example that illustrates why this second approach could be more useful.
> When you are using a step function like step-start, the sequence of forward and reversed animations look like this:
>
> The function step-start is reversed into a step-end alternately and the result is that the animation stays at the end state all the time.
> But, obviously, this is not what you want when using animation-direction:alternate.
>
> What you really want is this:
>
> i.e. the same step-start function is used for both the forward and reversed animations all the way.
> I hope it makes sense. Please give it a thought.

This should also be easy to do when we finally actually implement the
"frames()" function that was proposed and generally liked a while ago.
I've opened an issue <https://github.com/w3c/csswg-drafts/issues/136>
about it.

~TJ
Received on Thursday, 26 May 2016 00:30:46 UTC

This archive was generated by hypermail 2.3.1 : Thursday, 26 May 2016 00:30:46 UTC