 Abakada: Back to Basics > Language References > CSS Properties > Animation Properties > animation-composition Property
Defines the composite operation used when multiple animations affect the same property simultaneously.
| CSS |
{ animation-composition: replace | add | accumulate } |
| Script |
object.style.animationComposition = replace | add | accumulate |
| Parameter |
Description |
Valid Values |
| replace |
The effect value overrides the underlying value of the property. |
the keyword replace |
| add |
The effect value builds on the underlying value of the property. |
the keyword add |
| accumulate |
The effect and underlying values are combined. |
the keyword accumulate |
The property is read/write with a default value of replace; this attribute is not inherited.
The animation-composition property specifies the composite operation to use when multiple animations affect the same property simultaneously.
animation-composition is specified with the possible values listed above.
 NOTE: While the separate animation properties can be set individually, the shorthand animation property offers a convenient option to set all animation properties at once.
For a brief overview, please see Understanding and Using CSS Animations.
animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function
|