Hi, Dipika, Thanks for documenting this CSS property. I tried my best to answer the questions below. > 1. Any real-world examples, real use cases where a web developer would want to use 'animation-composition' on a property across multiple animation keyframes? Basically, I'm not sure if I'm a suitable person to answer this. However, if a web developer wants to combine the animation effect with its underlying value, `animation-composition` is the declarative way to define this, just like what we do for `KeyframeEffect.composite`. Perhaps you could check the answers below. > 2. What are the likely properties for which the composite effect of add and accumulate can be used/will be useful? https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite provide an example by using `filter`, so perhaps we could use the same property in the MDN for `animation-composition`. Besides, I think `transform` property is also a good example to demo this. See the example in the 3rd answer. > 3. What is the difference between the values 'add' and 'accumulate' and what properties can I visually show the difference in their meanings? First, the definition is in web animations spec: https://drafts.csswg.org/web-animations-1/#effect-composition, and in https://drafts.csswg.org/css-values-4/#combining-values a) `add`: The effect value is added to the underlying value. For animation types where the addition operation is defined such that it is not commutative, the order of the operands is underlying value + effect value. b) `accumulate`: The effect value is accumulated onto the underlying value. For animation types where the accumulation operation is defined such that it is not commutative, the order of the operands is underlying value followed by effect value. It's a little bit tricky to see the difference between `add` and `accumulate`. `transform` property is a good example to see the difference. See related wpt: https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-transforms/animation/transform-translate-composition.html e.g. ``` @keyframes anim { from { transform: translateX(100px); } to { ... } } #target { transform: translateX(100px) rotate(90deg); } ``` The underlying value is `translateX(100px)`. So if we are using `add`, the "from" animation value is `transform: translateX(100px) rotate(90deg) translateX(100px)`. If we are using `accumulate`, the "from" animation value is `transform: translate(200px) rotate(90deg)`. I also wrote an example in the 5th answer, so you can check the visual difference. > 4. The spec says: > > When specified in a keyframe, animation-composition defines the composite operation to use for each property specified in that keyframe until the next keyframe specifying each property. > > Does this mean from their example that since @keyframes heartbeat has multiple values of scale, there would be a composite scale effect if the animation on the .heartbeat class styling is animation: heartbeat 0.3s 2s accumulate; ? I do not see any visual difference on testing. This means the keyframe-specific composite: https://drafts.csswg.org/web-animations-1/#keyframe-specific-composite-operation. The example doesn't do this. I think this spec words mean something like this: ``` @keyframes anim { from { transform: translateX(100px); animation-composition: add; } // we define animation-composition inside @keyframes rule. to { transform: translateX(200px); } } #target { animation: anim 1s linear; animation-composition: accumulate; trasnform: translateX(100px) rotate(90deg); } ``` So the first keyframe, we apply `animation-composition: add`, but the second keyframe, we don't define `animation-composition` the this keyframe, so we use the animation-composition of this element, i.e. `accumulate` here. > 5. I tried the examples from the spec here https://codepen.io/dipikabh/pen/xxWQzwa and here https://codepen.io/dipikabh/pen/NWYEYdz. I cannot make out the difference between the three - 'add', 'replace', or 'accumulate'. I notice the preference is off by default, so first we have to enable the preference in Nightly: `layout.css.animation-composition.enabled`. Sorry about this. And I'm not sure these example is good to demo the visual difference between `replace` and `accumulate`. I saw a very minor difference between `replace` and `add` in these two cases. However, I believe this cannot convince you, so I wrote another one for your reference: https://codepen.io/BorisChiou/pen/XWEyxXE Thanks. :)
Bug 1293490 Comment 8 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
Hi, Dipika, Thanks for documenting this CSS property. I tried my best to answer the questions below. > 1. Any real-world examples, real use cases where a web developer would want to use 'animation-composition' on a property across multiple animation keyframes? Basically, I'm not sure if I'm a suitable person to answer this. However, if a web developer wants to combine the animation effect with its underlying value, `animation-composition` is the declarative way to define this, just like what we do for `KeyframeEffect.composite`. Perhaps you could check the answers below. > 2. What are the likely properties for which the composite effect of add and accumulate can be used/will be useful? https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite provide an example by using `filter`, so perhaps we could use the same property in the MDN for `animation-composition`. Besides, I think `transform` property is also a good example to demo this. See the example in the 3rd answer. > 3. What is the difference between the values 'add' and 'accumulate' and what properties can I visually show the difference in their meanings? First, the definition is in web animations spec: https://drafts.csswg.org/web-animations-1/#effect-composition, and in https://drafts.csswg.org/css-values-4/#combining-values a) `add`: The effect value is added to the underlying value. For animation types where the addition operation is defined such that it is not commutative, the order of the operands is underlying value + effect value. b) `accumulate`: The effect value is accumulated onto the underlying value. For animation types where the accumulation operation is defined such that it is not commutative, the order of the operands is underlying value followed by effect value. It's a little bit tricky to see the difference between `add` and `accumulate`. `transform` property is a good example to see the difference. See related wpt: https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-transforms/animation/transform-translate-composition.html e.g. ``` @keyframes anim { from { transform: translateX(100px); } to { ... } } #target { transform: translateX(100px) rotate(90deg); } ``` The underlying value is `translateX(100px)`. So if we are using `add`, the "from" animation value is `transform: translateX(100px) rotate(90deg) translateX(100px)`. If we are using `accumulate`, the "from" animation value is `transform: translate(200px) rotate(90deg)`. I also wrote an example in the 5th answer, so you can check the visual difference. > 4. The spec says: > > When specified in a keyframe, animation-composition defines the composite operation to use for each property specified in that keyframe until the next keyframe specifying each property. > > Does this mean from their example that since @keyframes heartbeat has multiple values of scale, there would be a composite scale effect if the animation on the .heartbeat class styling is animation: heartbeat 0.3s 2s accumulate; ? I do not see any visual difference on testing. This means the keyframe-specific composite: https://drafts.csswg.org/web-animations-1/#keyframe-specific-composite-operation. The example doesn't do this. I think this spec words mean something like this: ``` @keyframes anim { from { transform: translateX(100px); animation-composition: add; } // we define animation-composition inside @keyframes rule. to { transform: translateX(200px); } } #target { animation: anim 1s linear; animation-composition: accumulate; trasnform: translateX(100px) rotate(90deg); } ``` So the first keyframe, we apply `animation-composition: add`, but the second keyframe, we don't define `animation-composition` the this keyframe, so we use the `animation-composition` of this element, i.e. `accumulate` here. (I didn't write an example for this, but you can update my example in codepen to see the difference after adding `animation-composition` in a keyframe.) > 5. I tried the examples from the spec here https://codepen.io/dipikabh/pen/xxWQzwa and here https://codepen.io/dipikabh/pen/NWYEYdz. I cannot make out the difference between the three - 'add', 'replace', or 'accumulate'. I notice the preference is off by default, so first we have to enable the preference in Nightly: `layout.css.animation-composition.enabled`. Sorry about this. And I'm not sure these example is good to demo the visual difference between `replace` and `accumulate`. I saw a very minor difference between `replace` and `add` in these two cases. However, I believe this cannot convince you, so I wrote another one for your reference: https://codepen.io/BorisChiou/pen/XWEyxXE Thanks. :)
Hi, Dipika, Thanks for documenting this CSS property. I tried my best to answer the questions below. > 1. Any real-world examples, real use cases where a web developer would want to use 'animation-composition' on a property across multiple animation keyframes? Basically, I'm not sure if I'm a suitable person to answer this. However, if a web developer wants to combine the animation effect with its underlying value, `animation-composition` is the declarative way to define this, just like what we do for `KeyframeEffect.composite`. Perhaps you could check the answers below. > 2. What are the likely properties for which the composite effect of add and accumulate can be used/will be useful? https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite provide an example by using `filter`, so perhaps we could use the same property in the MDN for `animation-composition`. Besides, I think `transform` property is also a good example to demo this. See the example in the 3rd answer. > 3. What is the difference between the values 'add' and 'accumulate' and what properties can I visually show the difference in their meanings? First, the definition is in web animations spec: https://drafts.csswg.org/web-animations-1/#effect-composition, and in https://drafts.csswg.org/css-values-4/#combining-values a) `add`: The effect value is added to the underlying value. For animation types where the addition operation is defined such that it is not commutative, the order of the operands is underlying value + effect value. b) `accumulate`: The effect value is accumulated onto the underlying value. For animation types where the accumulation operation is defined such that it is not commutative, the order of the operands is underlying value followed by effect value. It's a little bit tricky to see the difference between `add` and `accumulate`. `transform` property is a good example to see the difference. See related wpt: https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-transforms/animation/transform-translate-composition.html e.g. ``` @keyframes anim { from { transform: translateX(100px); } to { ... } } #target { transform: translateX(100px) rotate(90deg); } ``` The underlying value is `translateX(100px)`. So if we are using `add`, the "from" animation value is `transform: translateX(100px) rotate(90deg) translateX(100px)`. If we are using `accumulate`, the "from" animation value is `transform: translate(200px) rotate(90deg)`. I also wrote an example in the 5th answer, so you can check the visual difference. > 4. The spec says: > > When specified in a keyframe, animation-composition defines the composite operation to use for each property specified in that keyframe until the next keyframe specifying each property. > > Does this mean from their example that since @keyframes heartbeat has multiple values of scale, there would be a composite scale effect if the animation on the .heartbeat class styling is animation: heartbeat 0.3s 2s accumulate; ? I do not see any visual difference on testing. This means the keyframe-specific composite: https://drafts.csswg.org/web-animations-1/#keyframe-specific-composite-operation. The example doesn't do this. I think this spec words mean something like this: ``` @keyframes anim { from { transform: translateX(100px); animation-composition: add; } // we define animation-composition inside @keyframes rule. to { transform: translateX(200px); } } #target { animation: anim 1s linear; animation-composition: accumulate; trasnform: translateX(100px) rotate(90deg); } ``` So the first keyframe, we apply `animation-composition: add`, but the second keyframe, we don't define `animation-composition` the this keyframe, so we use the `animation-composition` of this element, i.e. `accumulate` here. (I didn't write an example for this, but you can update my example in codepen to see the difference after adding `animation-composition` in a keyframe.) > 5. I tried the examples from the spec here https://codepen.io/dipikabh/pen/xxWQzwa and here https://codepen.io/dipikabh/pen/NWYEYdz. I cannot make out the difference between the three - 'add', 'replace', or 'accumulate'. I notice the preference is off by default, so first we have to enable the preference in Nightly: `layout.css.animation-composition.enabled`. Sorry about this. And I'm not sure these example are good to demo the visual difference between `replace` and `accumulate`. I saw a very minor difference between `replace` and `add` in these two cases. However, I believe this cannot convince you, so I wrote another example for your reference: https://codepen.io/BorisChiou/pen/XWEyxXE Thanks. :)
Hi, Dipika, Thanks for documenting this CSS property. I tried my best to answer the questions below. > 1. Any real-world examples, real use cases where a web developer would want to use 'animation-composition' on a property across multiple animation keyframes? Basically, I'm not sure if I'm a suitable person to answer this. However, if a web developer wants to combine the animation effect with its underlying value, `animation-composition` is the declarative way to define this, just like what we do for `KeyframeEffect.composite`. Perhaps you could check the answers below. > 2. What are the likely properties for which the composite effect of add and accumulate can be used/will be useful? https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite provide an example by using `filter`, so perhaps we could use the same property in the MDN for `animation-composition`. Besides, I think `transform` property is also a good example to demo this. See the example in the 3rd answer. > 3. What is the difference between the values 'add' and 'accumulate' and what properties can I visually show the difference in their meanings? First, the definition is in web animations spec: https://drafts.csswg.org/web-animations-1/#effect-composition, and in https://drafts.csswg.org/css-values-4/#combining-values a) `add`: The effect value is added to the underlying value. For animation types where the addition operation is defined such that it is not commutative, the order of the operands is underlying value + effect value. b) `accumulate`: The effect value is accumulated onto the underlying value. For animation types where the accumulation operation is defined such that it is not commutative, the order of the operands is underlying value followed by effect value. It's a little bit tricky to see the difference between `add` and `accumulate`. `transform` property is a good example to see the difference. See related wpt: https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-transforms/animation/transform-translate-composition.html e.g. ``` @keyframes anim { from { transform: translateX(100px); } to { ... } } #target { transform: translateX(100px) rotate(90deg); } ``` The underlying value is `translateX(100px)`. So if we are using `add`, the "from" animation value is `transform: translateX(100px) rotate(90deg) translateX(100px)`. If we are using `accumulate`, the "from" animation value is `transform: translate(200px) rotate(90deg)`. I also wrote an example in the 5th answer, so you can check the visual difference. > 4. The spec says: > > When specified in a keyframe, animation-composition defines the composite operation to use for each property specified in that keyframe until the next keyframe specifying each property. > > Does this mean from their example that since @keyframes heartbeat has multiple values of scale, there would be a composite scale effect if the animation on the .heartbeat class styling is animation: heartbeat 0.3s 2s accumulate; ? I do not see any visual difference on testing. This means the keyframe-specific composite: https://drafts.csswg.org/web-animations-1/#keyframe-specific-composite-operation. The example doesn't do this. I think the spec words mean something like this: ``` @keyframes anim { from { transform: translateX(100px); animation-composition: add; } // we define animation-composition inside @keyframes rule. to { transform: translateX(200px); } } #target { animation: anim 1s linear; animation-composition: accumulate; trasnform: translateX(100px) rotate(90deg); } ``` So the first keyframe, we apply `animation-composition: add`, but the second keyframe, we don't define `animation-composition` the this keyframe, so we use the `animation-composition` of this element, i.e. `accumulate` here. (I didn't write an example for this, but you can update my example in codepen to see the difference after adding `animation-composition` in a keyframe.) > 5. I tried the examples from the spec here https://codepen.io/dipikabh/pen/xxWQzwa and here https://codepen.io/dipikabh/pen/NWYEYdz. I cannot make out the difference between the three - 'add', 'replace', or 'accumulate'. I notice the preference is off by default, so first we have to enable the preference in Nightly: `layout.css.animation-composition.enabled`. Sorry about this. And I'm not sure these example are good to demo the visual difference between `replace` and `accumulate`. I saw a very minor difference between `replace` and `add` in these two cases. However, I believe this cannot convince you, so I wrote another example for your reference: https://codepen.io/BorisChiou/pen/XWEyxXE Thanks. :)