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.
W3C Module
CSS Animations
References (W3C)
Document status: WD (Working Draft)

Syntax diagram of animation-composition.

animation-composition - Syntax DiagramSyntax diagram of the animation-composition CSS property. See stylescss.free.fr for details. replace replace add add accumulate accumulateanimation-composition:;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 ).

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).

Javascript
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.

Javascript
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.

Javascript
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.

JQuery

$('#id').css('animation-composition', 'accumulate');
// or
$('#id').css('animationComposition', 'accumulate');

With JQuery, read the calculated value of animation-composition.

JQuery
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 :
Durations and easing function identical
Different durations
 
Different easing functions

Browsers compatibility with animation-composition.

Column 1
Ability to generally support CSS animations.
Column 2
Support for the animation-composition property.
1
Animations
support
2
animation-composition
property
Estimated overall support.
97%
92%

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.

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:

animation
Short hand property that defines most animation parameters, such as duration, speed up, number of repetitions, direction, and so on.
animation-delay
Langue française
The amount of time to wait before the animation starts.
animation-direction
Langue française
Animation direction (normal or reverse).
animation-duration
Langue française
Sets the total duration of an animation cycle.
animation-fill-mode
Sets the override when the animation is not running.
animation-iteration-count
Langue française
Sets the number of times an animation should be played.
animation-name
Langue française
Defines the animation to apply to the element.
animation-play-state
Langue française
Animation status (in progress or paused).
animation-timeline
Langue française
Associates animation with something other than time, such as scrolling through an element.
animation-timing-function
Langue française
Defines the easing function to be used during an animation.

At-rules:

@keyframes
Langue française
Defines the name of an animation and which properties are animated.