animation-composition

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.

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) aurait 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% aurait été blur(5px) blur(10px).
• Avec animation-composition: accumulate, l'effet de la valeur composite pour l'image-clé à 0% aurait été blur(15px).

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

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

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

HTML

<div class="container">
  <code>replace</code>
  <div id="replace" class="target"></div>
</div>
<div class="container">
  <code>add</code>
  <div id="add" class="target"></div>
</div>
<div class="container">
  <code>accumulate</code>
  <div id="accumulate" class="target"></div>
</div>

CSS

Ici, la valeur sous-jacente est translateX(50px) rotate(45deg).

@keyframes slide {
  20%,
  40% {
    transform: translateX(100px);
    background: yellow;
  }
  80%,
  100% {
    transform: translateX(150px);
    background: orange;
  }
}
.container {
  width: 240px;
  height: 220px;
  background: cyan;
  display: inline-block;
}
.target {
  width: 20px;
  height: 50px;
  background: green;
  border-radius: 10px;
  transform: translateX(50px) rotate(45deg);
  animation: slide 5s linear infinite;
}
.target:hover {
  animation-play-state: paused;
}
#replace {
  animation-composition: replace;
}
#add {
  animation-composition: add;
}
#accumulate {
  animation-composition: accumulate;
}

Résultat

• Avec replace, la valeur d'effet finale pour la propriété transform pour l'image-clé 20%, 40% est translateX(100px) (qui remplace complètement la valeur sous-jacente translateX(50px) rotate(45deg)). Dans ce cas, l'élément pivote de 45deg vers 0deg, car l'animation part de la valeur par défaut pour l'élément jusqu'à la valeur d'absence de rotation, comme défini à la progression de 20%. Il s'agit du comportement par défaut.
• Avec add, la valeur d'effet finale pour la propriété transform pour l'image-clé 20%, 40% est translateX(50px) rotate(45deg), suivie par translateX(100px). L'élément est donc déplacé de 50px vers la droite, tourné de 45deg, puis translaté de 100px supplémentaires le long de l'axe X nouvellement orienté.
• Avec accumulate, la valeur d'effet finale pour l'image-clé 20%, 40% est translateX(150px) rotate(45deg). Cela signifie que les deux translations sur l'axe X, avec les valeurs 50px et 100px, sont combinées.

• Utiliser des animations CSS
• La propriété composite de l'interface KeyFrameEffect de l'API Web Animations