Re: [web-anim] "Seamless" additive animation

Hi Kevin,

Thanks for following up here. I didn't see your response on the blog 
until now. I've replied there but it's probably best to continue the 
discussion here.

Kevin Doughty wrote:
> I have been posting to css-style for a recommendation of a particular type of additive transition. Please forgive the cross-post, but Brian Birtles commented at my website http://kxdx.org/seamless-css-transitions/ and I would like to address it here. I have been calling this type of animation "seamless". It is for implicit, transition-style animations, when the underlying value of a property is changed. I cannot stress enough how appropriate this usage pattern is for animating layout changes, in particular when responding to user events. It produces animations that seamlessly blend together and produce beautiful curves instead of jarring presentation value animations.

If I've understood the use case correctly, the arrangement is something 
like the following:

   start keyframe {
     additive: replace;
     prop: <previous value>;
   }
   end keyframe {
     additive: sum;
     prop: 0;
   }

Independent animations are then combined using a stack where the 
additive operators are used to determine how they combine.

Does this match your use case?

If so, it is possible with Web Animations. The main difficulty would be 
specifying the previous value declaratively.

It seems like, in effect, this is equivalent to simply using 
to-animations with a forwards fill and not updating the underlying 
style. However, I can see it has the advantage of providing better 
non-animated fallback and of affecting the specified style (which may be 
useful when style is used to track state).

Best regards,

Brian

Received on Tuesday, 11 June 2013 01:31:14 UTC