Animation-composition - Property CSS
Summary of characteristics of the animation-composition
property
replace
| add
| accumulate
replace
Not animable
: the animation-composition
property cannot be animated.Syntax diagram of animation-composition
.
animation-composition
property.Click on the diagram for more details.
Description of the animation-composition
property.
The animation-composition
property defines how multiple animations applied to the same property should interact at the same time.
Note that if multiple animations are applied to an element on different properties, animation-composition
will have no effect.
But also note that the transform
property can generate very different effects (rotations, changes of scale, displacements...)
but that it is nevertheless a unique property.
Consider the two animations defined below, both of which concern the scale
property (change of scale):
@keyframes zoom1 {
from {scale:0.5;}
to {scale:1.5;}
}
@keyframes zoom2 {
from {scale:0.5;}
to {scale:1.5;}
}
And let's apply both animations to the elements below simultaneously, each of which has a different value for their animation-composition
property.
animation: zoom1 2s infinite alternate, zoom2 2s infinite alternate;
replace
add
accumulate
For a general overview of animations, see animations in CSS.
And for explanations on animations multiples.
Values for animation-composition
.
- animation-composition: replace;
With this syntax, only the last animation is active. So it is as if a single animation has been applied to the property.
- animation-composition: add;
The resulting value is determined by applying the property multiple times with the values of each of the animations.
- animation-composition: accumulate;
The resulting value is determined by applying the property once with a value calculated from each of the animations. For most properties and animations,
accumulate
gives the same result asadd
or a result that is not very differentComparison between
add
andaccumulate
values:Example: with two animations on the
scale
property. The first animation is, in its cycle, at the value1.5
, while the second is at1.2
.With
add
on appliesscale:1.5;
, thenscale:1.2;
, i.e.scale:1.8;
.
WithAccumulate
, we applyscale:2.7;
But as we said, for most animations, the result of these two values is identical. For example, for the
rotate
:rotate:30deg;
is equivalent torotate:10deg;
followed byrotate:20deg;
.The result may also differ if animations are applied with different durations or different easing functions see
animation-timing-function
).
Standard values accepted by all properties:
animation-composition: initial (replace
)
animation-composition: inherit
animation-composition: revert
animation-composition: revertLayer
animation-composition: unset
Links to the presentation of these different values: initial
, inherit
, revert
, revert-layer
, unset
.
Animation of the animation-composition
property.
Because it is a property that defines animations, animation-composition
cannot be animated.
Manipulating the animation-composition
property programmatically.
With Javascript, change the value of animation-composition
.
In Javascript, here's how to change the value of animation-composition
.
Javascript offers a syntax with the typical CSS notation, in kebab-case
(a dash to separate words),
and a syntax with camel-case
notation (a capital letter to separate words).

let el = document.getElementById('id');
el.style['animation-composition'] = 'accumulate';
// or
let el = document.getElementById('id');
el.style.animationComposition = 'accumulate';
With Javascript, read the value of animation-composition
.
The property must have been assigned directly to the element itself through its style
attribute, and not in the style sheet, passing
by a CSS selector.

let el = document.getElementById('id');
let value = el.style['animation-composition'];
// or
let el = document.getElementById('id');
let value = el.style.animationComposition;
With Javascript, read the calculated value of animation-composition
.
The computed value is the value resulting from the evaluation of the cascade of inheritances. Otherwise, the initial value is returned
(
in the case of replace
animation-composition
). The computed value always exists.

let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('animation-composition');
With JQuery, change the value of animation-composition
.
Equivalent syntaxes can be found in JQuery.

$('#id').css('animation-composition', 'accumulate');
// or
$('#id').css('animationComposition', 'accumulate');
With JQuery, read the calculated value of animation-composition
.

let value = $('#id').css('animation-composition');
Other code examples.
See also Javascript and CSS for more Javascript or JQuery code examples.
Test it yourself.
The buttons below apply the entered value to the animation-composition
property and then display either the value as it was applied
for the first button, either the value computed for the second button. In the case of animation-composition
these two values will be the same since
the property accepts only predefined values.
Simulator.
Two animations have been set to the rotate
property, and set to be the opposite of each other: the first one rotates
from 0 degrees to 90 degrees, and the second starts from 90 degrees to go to 0 degrees.
These two animations are applied with identical durations and easing functions on the first block: we can see that the add
values
and accumulate
for the animation-composition
property result in a zero resulting animation. On the other hand, if the durations or
easing functions are different, the result is a rather complex movement.
Browsers compatibility with animation-composition
.
animation-composition
property.support
animation-composition
property
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini
Historic of the animation-composition
property.
-
CSS Animations Level 2
First definition foranimation-composition
.March 02, 2023Working Draft.
See also, on the subject of animations.
Everything related to animations is grouped in the specification module of the W3C CSS Animations. It is essentially a guideline and several properties.
Properties:








At-rules:
