Propriété CSS animation-composition

Syntaxe

/* Une seule animation */
animation-composition: replace;
animation-composition: add;
animation-composition: accumulate;

/* Plusieurs animations */
animation-composition: replace, add;
animation-composition: add, accumulate;
animation-composition: replace, add, accumulate;

/* Valeurs globales */
animation-composition: inherit;
animation-composition: initial;
animation-composition: revert;
animation-composition: revert-layer;
animation-composition: unset;

Valeurs

replace

La valeur d'effet remplace la valeur sous-jacente de la propriété. Il s'agit de la valeur par défaut.

add

La valeur d'effet est construite à partir de la valeur sous-jacente de la propriété. L'opération produit un effet additif. Pour les types d'animation pour lesquels l'opération d'addition n'est pas commutative, le premier opérande est la valeur sous-jacente et le second opérande est la valeur d'effet.

accumulate

La valeur d'effet et la valeur sous-jacente sont combinées. Pour les types d'animation où l'opération d'addition n'est pas commutative, le premier opérande est la valeur sous-jacente et le second opérande est la valeur d'effet.

Description

Chaque propriété ciblée par une règle @keyframes est associée avec une pile d'effets. La valeur de la pile d'effets est calculée en combinant la valeur sous-jacente d'une propriété CSS dans une règle de style avec la valeur d'effet de cette propriété dans l'image-clé (keyframe). La propriété animation-composition aide à indiquer la façon dont sont combinées la valeur sous-jacente et la valeur d'effet.

Par exemple, dans le fragment CSS qui suit, blur(5px) est la valeur sous-jacente, et blur(10px) est la valeur d'effet. La propriété filter est modifiée par les deux animations, pulse et brightness-pulse. La propriété animation-composition indique l'opération à réaliser afin de produire l'effet final, après avoir combiné l'effet de la valeur sous-jacente et de la valeur d'effet.

.icon:hover {
  filter: blur(5px);
  animation: 3s infinite pulse;
  animation-composition: add;
}

@keyframes pulse {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(20px);
  }
}

Prenons l'hypothèse d'autres valeurs que celle utilisée avant pour animation-composition afin d'illustrer l'impact final :

• Avec animation-composition: replace;, blur(10px) a remplacé blur(5px) pour l'image-clé à 0%. C'est le comportement par défaut de la propriété.
• Avec animation-composition: add;, l'effet de la valeur composite pour l'image-clé à 0% a été blur(5px) blur(10px).
• Avec animation-composition: accumulate, l'effet de la valeur composite pour l'image-clé à 0% a été blur(15px).

Définition formelle

Syntaxe formelle

animation-composition = 
  <single-animation-composition>#  

<single-animation-composition> = 
  replace     |
  add         |
  accumulate  

Exemples

Comprendre les valeurs de animation-composition

L'exemple qui suit illustre les effets des différentes valeurs de animation-composition.

HTML

<div class="conteneur">
  <code>replace</code>
  <div id="remplacer" class="cible"></div>
</div>
<div class="conteneur">
  <code>add</code>
  <div id="ajouter" class="cible"></div>
</div>
<div class="conteneur">
  <code>accumulate</code>
  <div id="accumuler" class="cible"></div>
</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.conteneur {
  flex: 1;
  min-width: 200px;
  height: 200px;
  background: lightblue;
  display: inline-block;
  text-align: center;
}

.cible {
  width: 20px;
  height: 50px;
  background: green;
  border-radius: 10px;
  margin: 20px 0;
}

@keyframes slide {
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateX(150px);
  }
}

.cible {
  transform: translateX(30px) rotate(45deg);
  animation: slide 5s linear infinite;
}
#remplacer {
  animation-composition: replace;
}
#ajouter {
  animation-composition: add;
}
#accumuler {
  animation-composition: accumulate;
}

Résultat

La valeur sous-jacente de la propriété transform est, dans tous les cas, translateX(30px) rotate(45deg). Les effets des différentes valeurs de animation-composition sont les suivants :

• Avec replace, la propriété transform de chaque image clé remplace entièrement la propriété transform sous-jacente définie sur l'élément animé. La valeur finale de la propriété transform à l'image clé 50% est translateY(30px) (sans rotate ni translateX) ; à l'image clé 100%, elle est translateX(150px) (sans rotate ni translateY).

  La cible commence à transform: translateX(30px) rotate(45deg) et s'anime effectivement vers transform: translateY(30px), puis vers transform: translateX(150px).

• Avec add, la valeur finale de l'effet à chaque image clé correspond à la valeur transform sous-jacente, suivie immédiatement de la valeur de l'effet.

  Ainsi, la cible commence à transform: translateX(30px) rotate(45deg) et s'anime effectivement d'abord vers transform: translateX(30px) rotate(45deg) translateY(30px) (ce qui correspond à 30px "vers le bas" sur l'axe Y tourné), puis vers transform: translateX(30px) rotate(45deg) translateX(150px). Comme l'opération additive est relative au transform sous-jacent et non à l'image clé précédente, il n'y a pas de translateY(30px) à 100%, plaçant l'élément à 150px le long de l'axe X tourné par rapport à la position d'origine.

• Avec accumulate, la valeur finale de l'effet est la combinaison du transform de l'image clé avec le transform sous-jacent. À 50%, translateY(30px) se combine avec le translateX(30px) d'origine pour former une seule translation (translate(30px, 30px)). À 100%, le translateX(150px) se combine avec le translateX(30px) d'origine pour créer translateX(180px).

  Ainsi, la cible commence à transform: translateX(30px) rotate(45deg) et s'anime effectivement d'abord vers transform: translate(30px, 30px) rotate(45deg), puis vers transform: translateX(180px) rotate(45deg).

Spécifications

Compatibilité des navigateurs

Voir aussi

• Utiliser des animations CSS
• La propriété composite de l'interface KeyFrameEffect de l'API Web Animations
• Les autres propriétés d'animation associées : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function