Lesanimations ettransitions 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 secombinent^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.

Types d'animations

Il existe principalement quatre types d'animation tels que définis dans la spécificationWeb 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ènementanimationstart).

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 :

• Sip < 0.5, alorsV_resultat = V_debut ;
• Sip ≥ 0.5, alorsV_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éthoderegisterProperty(), le type d'animation est par valeur calculée, le type de valeur calculée étantdé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

• Utilisation des animations CSS
• Utilisation des transitions CSS