Remplacer, ajouter ou accumuler du contenu ? Suspense…
Combiner plusieurs effets d'animation
La propriété animation-composition permet de contrôler ce qui doit se passer lorsque plusieurs animations affectent simultanément la même propriété.
Supposons que cette transformation de base soit appliquée à un élément:
transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);
Vous disposez également de l'ensemble d'images clés suivant:
@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 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 addition et accumulation est subtile. Prenons l'exemple des deux valeurs blur(2) et blur(3). Si vous les additionnez, vous obtenez blur(2) blur(3), mais lorsque vous les cumulez, vous obtenez blur(5).
Vous pouvez comparer cela avec une tasse remplie de thé. Voici ce qui se produit lorsque vous versez du lait dedans:
replace: le thé est retiré et remplacé par le lait.add: le lait est ajouté dans la tasse, mais reste en superposition sur le thé.accumulate: le lait est ajouté au thé et, comme ils sont liquides, ils se marient bien.
Démonstration
Dans la démonstration ci-dessous, trois cases grises sont associées aux valeurs transform et animation de base.
Même si ces cases ont la même animation, elles génèrent un résultat différent, car elles ont un ensemble animation-composition différent:
Le premier champ est défini sur animation-composition: replace. Il s'agit du comportement par défaut. Dans sa position de fin, la valeur translateX(50px) rotate(45deg) d'origine de transform est simplement remplacée par translateX(100px).
La deuxième zone est définie sur animation-composition: add. À sa position de fin, translateX(100px) est ajouté à l'élément translateX(50px) rotate(45deg) d'origine, ce qui génère translateX(50px) rotate(45deg) translateX(100px). Cela permet de déplacer la zone de 50 pixels, puis de la faire pivoter de 45 degrés, puis de la déplacer de 100 pixels.
La troisième zone est définie sur animation-composition: accumulate. Dans sa position de fin, translateX(100px) est mathématiquement ajouté à translateX(50px) à partir de la transformation d'origine, ce qui entraîne une transformation de translateX(150px) rotate(45deg).