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

Hi Brian,

> On 10 Sep 2014, at 12:46 pm, Brian Birtles <bbirtles@mozilla.com> wrote:
> 
> 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 ]#' ?

Yeah. All these are lists - my grammar left that out.

> 
>> 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]

We should allow that. Just like animation-timing-function, the behaviour could be set within keyframes.

> 
>> 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).

I left that out, but for no good reason. Let's put it back in.

Dean


> 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 23:57:46 UTC