Animation des propriétés en CSS
Les animations et transitions CSS reposent sur le concept de propriétés pouvant être animées. Sauf indication contraire, toutes les propriétés CSS peuvent être animées. Le type d'animation de chaque propriété détermine la manière dont les valeurs se combinent angl. en s'interpolant, s'additionnant, ou en s'accumulant. Les transitions n'impliquent que l'interpolation, tandis que les animations peuvent utiliser les trois méthodes de combinaison.
Note :
Le type d'animation de chaque propriété CSS est indiqué dans son tableau de « définition formelle » (par exemple : color
).
Note :
La méthode d'interpolation pour chaque type de données CSS est décrite dans sa section « Interpolation » (par exemple : <length>
).
Types d'animations
Il existe principalement quatre types d'animation tels que définis dans la spécification Web Animations angl. :
- Ne pouvant être animée
-
La propriété n'est pas animée. Elle n'est pas traitée lorsqu'elle est listée dans une image-clé d'animation et n'est pas affectée par les transitions.
Note : Un effet d'animation ciblant uniquement des propriétés qui ne sont pas animées présentera toujours le comportement habituel d'un effet d'animation (par exemple, déclenchement de l'évènement
animationstart
). - Discrète
-
Les valeurs de la propriété ne sont pas cumulées et l'interpolation passe de la valeur initiale à la valeur finale à
50%
. Plus précisément, on désigne parp
la valeur de progression :- Si
p < 0.5
, alorsV_resultat = V_debut
; - Si
p ≥ 0.5
, alorsV_resultat = V_fin
.
- Si
- Par valeur calculée
-
Les composantes individuelles correspondantes des valeurs calculées sont combinées à l'aide de la procédure indiquée pour ce type de valeur. Si le nombre de composants ou les types de composants correspondants ne concordent pas, ou si une valeur de composant utilise une animation discrète et que les deux valeurs correspondantes ne concordent pas, les valeurs de propriété sont combinées comme des valeurs discrètes.
- Liste répétable
-
Identique à la valeur calculée, sauf que si les deux listes ont des nombres différents d'éléments, elles sont d'abord répétées jusqu'au plus petit nombre commun d'éléments. Chaque élément est ensuite combiné par valeur calculée. Si une paire de valeurs ne peut pas être combinée ou si l'une des valeurs composantes utilise une animation discrète, les valeurs de la propriété sont combinées comme des valeurs discrètes.
Certaines propriétés ont un comportement d'interpolation spécifique qui n'est pas couvert par ces quatre types. Dans ce cas, reportez-vous à la section « Interpolation » de la propriété (par exemple : visibility
).
Animer les propriétés personnalisées
Pour les propriétés personnalisées enregistrées à l'aide de la méthode registerProperty()
, le type d'animation est par valeur calculée, le type de valeur calculée étant déterminé angl. par la définition syntaxique de la propriété.
Pour les propriétés personnalisées non enregistrées, le type d'animation est discret.