Spécifier la façon dont les effets d'animation doivent être composés avec la composition d'animation

Remplacer, ajouter ou accumuler ? Suspense…

Bramus

Combiner plusieurs effets d'animation

La propriété animation-composition permet de contrôler ce qui doit se passer lorsque plusieurs animations affectent la même propriété simultanément.

Supposons que vous ayez appliqué cette transformation de base à un élément :

transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);

et que vous disposez également de cet ensemble d'images clés :

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

Lorsque vous appliquez ces images clés à un élément, le transform de l'image clé to remplace le transform existant. Il s'agit du comportement par défaut.

Avec animation-composition, vous pouvez désormais contrôler ce qui doit se passer au lieu de la replace par défaut. Les valeurs acceptées sont les suivantes :

• replace : la valeur de l'effet remplace la valeur sous-jacente. (par défaut)
• add : la valeur de l'effet est ajoutée à la valeur sous-jacente.
• accumulate : la valeur de l'effet est combinée à la valeur sous-jacente.

La différence entre l'addition et l'accumulation est subtile. Prenons par exemple les deux valeurs blur(2) et blur(3). Lorsqu'ils sont additionnés, ils donnent blur(2) blur(3), mais lorsqu'ils sont cumulés, ils donnent blur(5).

Vous pouvez comparer cela à une tasse remplie de thé. Voici ce qui se passerait si vous versiez du lait dans le verre :

• replace : le thé est retiré et remplacé par le lait.
• add : le lait est ajouté à la tasse, mais reste en surface du thé.
• accumulate : le lait est ajouté au thé et, comme il s'agit de deux liquides, ils se mélangent bien.

Démo

Dans la démo ci-dessous, trois boîtes grises ont la base transform et animation qui leur sont appliquées.

Même si ces boîtes ont la même animation, elles donnent un résultat différent, car elles ont un ensemble animation-composition différent :

La première boîte est définie sur animation-composition: replace. Il s'agit du comportement par défaut. Dans sa position finale, la valeur translateX(50px) rotate(45deg) d'origine pour transform est simplement remplacée par translateX(100px).

La deuxième zone est définie sur animation-composition: add. Dans sa position finale, le translateX(100px) est ajouté au translateX(50px) rotate(45deg) d'origine, ce qui donne translateX(50px) rotate(45deg) translateX(100px). La boîte est déplacée de 50 px, puis tournée de 45 degrés, puis déplacée de 100 px.

La troisième case est définie sur animation-composition: accumulate. Dans sa position finale, le translateX(100px) sera mathématiquement ajouté au translateX(50px) de la transformation d'origine, ce qui entraînera une transformation de translateX(150px) rotate(45deg).

Photo par Alex Boyd, publiée sur Unsplash