`Animation-composition` - Property CSS

animation-composition

Summary of characteristics of the `animation-composition` property

Quick description

Defines how multiple animations applied to the same property interact.

Status

Standard

Usable for

HTML

Predefined values

replace | add | accumulate

Percentages

Not applicable.

Initial value

replace

Inherited by default

No.

Animation type

Not animable: the animation-composition property cannot be animated.

Canonical order

Single: single value (no order).

W3C Module

CSS Animations

References (W3C)

CSS Animations Level 2

Document status: WD (Working Draft)

Syntax diagram of `animation-composition`.

SSyntax diagram of the 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 as add or a result that is not very different

Comparison between add and accumulate values:

Example: with two animations on the scale property. The first animation is, in its cycle, at the value 1.5, while the second is at 1.2.

With add on applies scale:1.5;, then scale:1.2;, i.e. scale:1.8;.
With Accumulate, we apply scale: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 to rotate:10deg; followed by rotate:20deg;.

The result may also differ if animations are applied with different durations or different easing functions see animation-timing-function ).
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.

Examples with the `animation-composition` property.

It is definitely when animating the transform property that the effects are most visible, particularly the differences between the add and accumulate values for the animation-composition property.

In this example, we applied the same animation twice, with the same duration and easing function parameters. The @keyframes directive is visible by clicking the button.

animation-composition:
replace;

animation-composition:
add;

animation-composition:
accumulate;

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 (replace in the case of 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.

animation-composition :

replace

add

accumulate

Durations and easing function identical

Different durations

Different easing functions