Re: [csswg-drafts] [css-cascade] Additive CSS

(I'm reading through the proposals & comments, so I'll be making a series of comments on separate points.  Overall: I really want this feature in CSS!)

> As it turns out SVG uses both these modes. When two independent animations are added together it does list concatenation, i.e. blur(2px) blur(5px) from above. When an animation is defined to build on itself on each iteration it adds the function components, i.e. blur(7px) from above.
> 
> (Technically SVG only makes this distinction for transform animations and it doesn't actually do list concatenation, but matrix post-multiplication which is functionally equivalent.)

This is a very misleading summary.

[SVG/SMIL has two types of additive animations](https://www.w3.org/TR/SVG11/animate.html#AdditionAttributes), yes: multiple independent animations adding together ("additive" animations) versus a single animation that increases its effect on each repeat ("accumulate" animations).  

[Only certain data types are additive](https://www.w3.org/TR/SVG11/animate.html#AnimationAttributesAndProperties) (number, length, angle, color, x-y pairs, and transformations).  However, they normally behave identically as far as how the addition is calculated, regardless whether it is addition from separate animations or from repeats.

The only time there is a difference is for `<animateTransform>`.  And that has less to do with the non-commutative nature of transforms, and more to do with the structure of the `<animateTransform>`: the transform type (e.g., `translate` versus `rotate`) is defined separately from the values (parameters, i.e., the distance or the angle).  Accumulation applies to the values, because it's a property of a single animation element, but addition applies to the complete effect.  

[Example of accumulate and additive animations, for `<animate>` and `<animateTransform>`](https://codepen.io/AmeliaBR/pen/Vzjrma/?editors=1000)

Presumably, if you used `<animate>` to animate a transformation by directly setting the transformation string as the value (as proposed for Level 2 SVG animations), then you would always be adding the complete animation, even for accumulations.

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1594#issuecomment-319549352 using your GitHub account

Received on Wednesday, 2 August 2017 02:20:31 UTC