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 <[email protected]> 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
