animation-composition
Baseline 2023
Newly available
Since July 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété CSS animation-composition
définit une opération composite à utiliser lorsque plusieurs animations touchent simultanément la même propriété.
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;
Note : Lorsqu'on indique plusieurs valeurs, séparées par des virgules, à une propriété animation-*
, celles-ci seront appliquées aux animations selon leur ordre d'apparition dans animation-name
. Si le nombre d'animations et de compositions est différent, les valeurs de animation-composition
seront réutilisées en bouclant depuis le début, jusqu'à ce que toutes les animations aient reçue une valeur animation-composition
. Pour plus d'informations, voir définir les valeurs de propriétés pour plusieurs animations.
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)
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)
.
Note : Une opération composite peut également être indiquée dans une image-clé donnée. Dans ce cas, l'opération composite indiquée est utilisée pour chaque propriété, d'abord pour celles de l'image-clé courante, puis sur chaque propriété de l'image-clé suivante.
Définition formelle
Valeur initiale | replace |
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | Not animatable |
Syntaxe formelle
Exemples
Comprendre les valeurs de animation-composition
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%
esttranslateX(100px)
(qui remplace complètement la valeur sous-jacentetranslateX(50px) rotate(45deg)
). Dans ce cas, l'élément pivote de45deg
vers0deg
, 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%
esttranslateX(50px) rotate(45deg)
, suivie partranslateX(100px)
. L'élément est donc déplacé de50px
vers la droite, tourné de45deg
, puis translaté de100px
supplémentaires le long de l'axe X nouvellement orienté. - Avec
accumulate
, la valeur d'effet finale pour l'image-clé20%, 40%
esttranslateX(150px) rotate(45deg)
. Cela signifie que les deux translations sur l'axe X, avec les valeurs50px
et100px
, sont combinées.
Spécifications
Specification |
---|
CSS Animations Level 2 # animation-composition |
Compatibilité des navigateurs
BCD tables only load in the browser