Combiner plusieurs effets d'animation avec animation-composition

Bramus

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

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

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

Et que vous disposiez également de cet ensemble d'images clés :

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

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

Avec animation-composition, vous pouvez désormais contrôler ce qui doit se produire 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'elles sont ajoutées, elles produisent blur(2) blur(3), mais lorsqu'elles sont accumulées, elles produisent blur(5).

Vous pouvez comparer cela à une tasse remplie de thé. Lorsque vous y versez du lait, voici ce qui se passe :

• replace : le thé est retiré et remplacé par le lait.
• add : le lait est ajouté à la tasse, mais il reste superposé au 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, trois cases grises ont la même transform et la même animation de base.

Bien que ces cases aient la même animation, elles donnent un résultat différent, car elles ont un animation-composition différent :

La première case 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 remplacée par translateX(100px).

La deuxième case est définie sur animation-composition: add. Dans sa position finale, la valeur translateX(100px) est ajoutée à la valeur translateX(50px) rotate(45deg)d'origine, ce qui donne translateX(50px) rotate(45deg) translateX(100px). La case est déplacée de 50 pixels, puis tournée de 45 degrés, puis déplacée de 100 pixels.

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