Re: [css-transforms][filter-effects][web-animations] Thoughts about adding animations

On Feb 17, 2014, at 1:53 AM, Brian Birtles <bbirtles@mozilla.com> wrote:

> If we match up the filter functions and add their components we end up with an animation that remains at 'opacity(1)' for half the duration then animates to 'opacity(0)'.

This is good for the non-filter version of opacity. It would be nice to get the same behavior.

> If we just append to the list of filter functions we get an element with a sepia effect that is gradually blurred.

For additive, I would prefer to do the "match and add” with groups in a custom order. Perhaps the default behavior could append, but with the ability to override or enhance?

> predefined slots for each kind of transform animation so that they always add in the same order.

I have an example that does this manually. Transform animations are added to one group, rotate and scale to another. I use animations with a simple timing of {fill:"both", easing:"step-start”} to create underlying values. Then I add many backward-filling additive animations with a destination of zero.

http://jsfiddle.net/a8a7n/

One problem is that groups must have a very long duration, because child animations are not known in advance. You can see this by replacing either of the two occurrences of 999999999 with 0. A solution could be a removedOnCompletion property, or a special kind of group that sleeps and wakes when necessary (and maybe also sets the delay of added animations). The both-filling underlying value animations do not prevent groups from sleeping, maybe because they get replaced.