Re: [css-animations] Proposal for animation triggers, timebases and additive behavior

Hi Dean,

Thanks for this. I like the features you've proposed a lot. I'm going to 
respond to the timebase part and the additive part in separate messages.

First the easy one, animation-behavior.

On 2014/09/10 7:58, Dean Jackson wrote:
> animation-behavior
> -----------------
>
> Name: animation-behavior
> Value: replace | add

I think this is supposed to be '[ replace | add ]#' ?

> Initial: replace
> Inherited: no
> Animatable: no
>
> Defines how multiple animations on the same property interact with each other.
>
> The default value is "replace", where the last animation will overwrite all
> other animations in definition order.

The model in Web Animations lets you set the additive behavior 
per-animation and per-keyframe. This latter part, per-keyframe lets you 
do some powerful effects from SVG's to-animation to Kevin Doughty's 
seamless/relative/negative delta/hypermatic animations.[1]

> A value of "additive" means that the animation will add to the value provided
> by the previous animation. This term, and how it works on various properties
> like transform and color, is defined in lots of other specs. For example,
> section 4.1.3 of the Web Animations spec lists a lot of cases (color, transforms,
> lengths).

We also discovered a third mode, 'accumulate' is useful which does 
component matching (we needed this in order to match SVG's accumulate 
behaviour). So for the following:

   @keyframes a {
     to {
       transform: scale(2);
       filter: blur(5px);
     }
   }
   @keyframes b {
     to {
       transform: scale(3);
       filter: blur(10px);
     }
   }

Using the following:

   animation: a 5s forwards, b 5s forwards add;

You'd end with a computed style of:

   transform: scale(2) scale(3);
   filter: blur(5px) blur(10px);

But with the following:

   animation: a 5s forwards, b 5s forwards accumulate;

You'd end with a computed style of:

   transform: scale(5);
   filter: blur(15px);


So, in summary, the Web Animations model is:

   animation-composite: [ replace | add | accumulate ]#

And the same property can also be used on individual keyframes and 
overrides in the same way as animation-timing-function.

Best regards,

Brian

[1] http://kxdx.org/

Received on Wednesday, 10 September 2014 02:47:07 UTC