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 par p la valeur de progression :

  • Si p < 0.5, alors V_resultat = V_debut ;
  • Si p ≥ 0.5, alors V_resultat = V_fin.
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.

Voir aussi