Animation-composition - Propriété CSS

animation-composition

Résumé des caractéristiques de la propriété animation-composition

Description rapide
Définit comment interagissent plusieurs animations appliquées à la même propriété.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
replace | add | accumulate
Pourcentages
Ne s'appliquent pas.
Valeur initiale
replace
Héritée par défaut
Non.
Type d'animation
Not animable : la propriété animation-composition ne peut pas être animée.
Ordre canonique
Single : valeur unique (l'ordre n'intervient pas).
Module W3C
Module CSS - Animations
Références (W3C)
Statut du document: WD (document de travail)

Syntaxe de animation-composition (schéma).

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:;
Schéma syntaxique de la propriété animation-composition.
Détails sur les valeurs.

Description de la propriété animation-composition.

La propriété animation-composition définit comment doivent interagir plusieurs animations appliquées en même temps à une même propriété. Notez bien que si plusieurs animations sont appliquées à un élément sur des propriétés différentes, animation-composition sera sans effet. Mais notez aussi que la propriété transform peut générer des effets très différents (rotations, changements d'échelle, déplacements...) mais qu'elle est malgré tout une propriété unique.

Considérons les deux animations définies ci-dessous, concernant toutes les deux la propriété scale (changement d'échelle) :

@keyframes zoom1 { from {scale:0.5;} to {scale:1.5;} }
@keyframes zoom2 { from {scale:0.5;} to {scale:1.5;} }

Et appliquons simultanément les deux animations aux éléments ci-dessous, chacun d'eux ayant une valeur différente pour leur propriété animation-composition.

animation: zoom1 2s infinite alternate, zoom2 2s infinite alternate;

replace

add

accumulate

 

Pour une présentation générale des animations, reportez-vous à la page animations en CSS.
Et pour des explications sur les animations multiples.

Valeurs pour animation-composition.

  • animation-composition: replace;

    Avec cette syntaxe, seule la dernière animation est active. Tout se passe donc comme si une seule animation avait été appliquée à la propriété.

    animation-composition:replace;
  • animation-composition: add;

    La valeur résultante est déterminée en appliquant successivement chacune des animations.

    animation-composition:add;
  • animation-composition: accumulate;

    La valeur résultante est déterminée en appliquant à la propriété une valeur calculée à partir de chacune des animations. Pour la plupart des propriétés et des animations, accumulate donne le même résultat que add ou un résultat peu différent.

    animation-composition:accumulate;

    Comparaison entre les valeurs add et accumulate :

    Exemple : avec deux animations sur la propriété scale. La première animation en est, dans son cycle, à la valeur 1.5, tandis que la deuxième en est à 1.2.

    Avec add on applique scale:1.5;, puis scale:1.2;, soit scale:1.8;.
    avec accumulate, on applique scale:2.7;

    Mais comme nous l'avons dit, pour la plupart des animations, le résultat de ces deux valeurs est identique. Par exemple pour la propriété rotate : rotate:30deg; est équivalent à rotate:10deg; suivi de rotate:20deg;.

    Le résultat peut également différer si les animations sont appliquées avec des durées différents ou des fonctions d'accélération différentes (voir animation-timing-function).

  • animation-composition: initial; (replace) animation-composition: inherit; animation-composition: revert; animation-composition: revertLayer; animation-composition: unset;

    Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Exemples avec la propriété animation-composition.

C'est décidément en animant la propriété transform que les effets sont le plus visibles, en particulier les différences entre les valeurs add et accumulate pour la propriété animation-composition.

Dans cet exemple, nous avons appliqué deux fois la même animation, avec les mêmes paramètres de durée et de fonction d'accélération. La directive @keyframes est visible en cliquant sur le bouton.

animation-composition:
replace;
animation-composition:
add;
animation-composition:
accumulate;

Possibilité d'animation de la propriété animation-composition.

Étant elle-même une propriété définissant les animations, animation-composition ne peut pas être animée.

La propriété animation-composition et Javascript.

Avec Javascript, modifier la valeur de animation-composition.

En Javascript, voici comment modifier la valeur de animation-composition. Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).

Javascript
let el = document.getElementById('id'); el.style['animation-composition'] = 'accumulate'; // ou let el = document.getElementById('id'); el.style.animationComposition = 'accumulate';

Avec Javascript, lire la valeur de animation-composition.

La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et non pas dans la feuille de styles, en passant par un sélecteur CSS.

Javascript
let el = document.getElementById('id'); let value = el.style['animation-composition']; // ou let el = document.getElementById('id'); let value = el.style.animationComposition;

Avec Javascript, lire la valeur calculée de animation-composition.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages. A défaut, c'est la valeur initiale qui est renvoyée (replace dans le cas de animation-composition). La valeur calculée existe toujours.

Javascript
let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('animation-composition');

Avec JQuery, modifier la valeur de animation-composition.

On retrouve des syntaxes équivalentes en JQuery.

JQuery

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

Avec JQuery, lire la valeur calculée de animation-composition.

JQuery
let value = $('#id').css('animation-composition');

Autres exemples de code.

Voir également la page Javascript et CSS pour d'autres exemples de code Javascript ou JQuery.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété animation-composition et affichent ensuite soit la valeur telle qu'elle a été appliquée pour le premier bouton, soit la valeur calculée pour le deuxième bouton. Dans le cas de animation-composition ces deux valeurs seront les mêmes puisque la propriété n'accepte que des valeurs prédéfinies.

Simulateur avec la propriété animation-composition.

Deux animations ont été définie sur la propriété rotate, et paramétrées pour être l'inverse l'une de l'autre : la première effectue une rotation depuis 0 degrés vers 90 degrés, et la deuxième part de 90 degrés pour aller vers 0 degrés.

Ces deux animations sont appliquées avec des durées et des fonctions d'accélération identiques sur le premier bloc : on constate que les valeurs add et accumulate pour la propriété animation-composition donnent une animation résultante nulle. Par contre si les durées ou les fonctions d'accélération sont différentes, le résultat est un mouvement assez complexe.

animation-composition :
Durée et fonctions d'accélération identiques
Durées différentes
 
Fonctions d'accélération différentes

Support de animation-composition.

Colonne 1
Capacité de prendre en charge de façon générale les animations en CSS.
Colonne 2
Support de la propriété animation-composition.
1
Support des
animations
2
Propriété
animation-composition
Estimation de la prise en charge globale.
97%
92%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Évolution de la propriété animation-composition.

Voir aussi, au sujet des animations.

Tout ce qui concerne les animations est regroupé dans le module de spécification du W3C CSS Animations. Il s'agit essentiellement d'une directive et de plusieurs propriétés.

Propriétés :

animation
Propriété résumée définissant la plupart des paramètres d'animation : durée, fonction d'accélération, nombre de répétition, direction, etc.
Animation-composition
Définit comment interagissent plusieurs animations appliquées à la même propriété.
animation-delay
Temps d'attente avant le démarrage de l'animation, à compter le plus souvent du chargement de la page.
animation-direction
Définit le sens de l'animation (normal ou inverse) par rapport à la directive @keyframes.
animation-duration
Définit la durée totale d'un cycle d'animation.
animation-fill-mode
Définit le remplacement lorsque l'animation n'est pas en cours d'exécution.
animation-iteration-count
Définit le nombre de fois qu'une animation doit être jouée.
animation-name
Définit quelle animation (définie par @keyframes) appliquer à l'élément.
animation-play-state
Définit l'état de l'animation (en cours ou en pause).
⚠
animation-timeline
Associe l'animation à autre chose que le temps, par exemple le défilement d'un élément.
animation-timing-function
Définit la fonction d'accélération à utiliser pendant une animation.

Directives :

@keyframes
Définit le nom d'une animation et quelles sont les propriétés qui sont animées.