Re: [web-animations] Should default time function be "ease"?

Hi Brian,

Thanks for the reply.

You examples make me read the spec again, and if I’m not wrong, the timing functions specified in each keyframe and in the animation node are *accumulative* (keyframes apply the specified time function to the time fractions they receive from their animation nodes), whereas in css animations, timing function in each keyframe *overrides* the one specified for the animation.

If that’s true, I prefer the #2 proposal too. But just to make sure I understand it correctly, it uses “ease” for standalone animation nodes, but uses “linear” for animation nodes contained in a group, by using a special “auto” keyword as the default value for AnimationTimingProperties.easing (and keeps using “linear” as the default value for keyframe time functions). Is that correct?

> On Feb 12, 2015, at 9:02 AM, Brian Birtles <bbirtles@mozilla.com> wrote:
> 
> On 2015/02/10 18:47, Glen Huang wrote:
>> Both css transition and css animations use “ease” as the default timing function. Why web-animations use “linear” instead?
>> 
> 
> Hi Glen,
> 
> Thanks for your mail. I like the idea of aligning better with CSS however there is a slight difference in the way Web Animations and CSS work in this area.
> 
> For CSS, the animation-timing-function is always applied between each pair of keyframes. As a result, the following animation will slow-down in the middle.
> 
>  animation: fade-out 3s;
> 
>  @keyframes fade-out {
>    from { opacity: 1; }
>    50%  { opacity: 0.5; }
>    100% { opacity: 0; }
>  }
> 
> The (default) "ease" timing function is applied to each segment individually.
> 
> In Web Animations, however, the following will behave differently.
> 
>  elem.animate(
>    [ { opacity: 1 },
>      { opacity: 0.5 },
>      { opacity: 0 } ],
>    { duration: 3000,
>      easing: 'ease' });
> 
> In this case the easing is applied across the whole 3s so there is no slow-down in the middle. The equivalent to the CSS animation above would be:
> 
>  elem.animate(
>    [ { opacity: 1, easing: 'ease' },
>      { opacity: 0.5, easing: 'ease' },
>      { opacity: 0 } ], 3000);
> 
> We could make 'ease' the default for *either* individual keyframes or for the effect as a whole.
> 
> 1) If we make Keyframe.easing default to "ease" then to ease the effect as a whole it would be necessary to set the easing on each keyframe to "linear" to avoid easing twice.
> 
> 2) If we make AnimationTimingProperties.easing default to "ease" then it be necessary to set the easing on the animation to "linear" in order to do per-keyframe easing. Also, when we introduce groups we would not want them to use "ease" so we would need to add an "auto" keyword that uses "linear" for groups.
> 
> (2) seems better than (1) but still a little complicated. What do you think?
> 
> Best regards,
> 
> Brian

Received on Thursday, 12 February 2015 10:50:45 UTC