animation-name

Syntaxe

Paramètres

Description

Cette propriété permet d'indiquer le nom de l'animation «@keyframes».

Remarques

• Définition de l'animation : La propriété animation-name spécifie le nom de l'animation à appliquer à un élément. Ce nom fait référence à un ensemble de règles définies avec @keyframes. Cela permet de lier une animation à un élément HTML, où le nom de l'animation est utilisé pour identifier quel ensemble d'images clés doit être appliqué.
• Combinaison avec d'autres propriétés d'animation : Pour que l'animation fonctionne correctement, animation-name doit être utilisée en conjonction avec d'autres propriétés d'animation comme animation-duration, animation-timing-function, et animation-iteration-count. Ensemble, ces propriétés permettent de configurer l'animation en termes de durée, d'effet de vitesse et de répétition.
• Multiple animations : Il est possible d'appliquer plusieurs animations à un seul élément en séparant les noms des animations par des virgules. Cette fonctionnalité permet d'avoir des animations complexes combinées, tout en conservant un contrôle précis sur l'ordre et l'impact de chaque animation appliquée.
• Interaction avec les animations définies par @keyframes : L'animation définie par @keyframes doit correspondre au nom spécifié dans animation-name. Si le nom ne correspond à aucune animation définie dans les règles @keyframes, l'élément n'affichera aucune animation. Cela permet de s'assurer que l'animation est appliquée de manière cohérente.
• Rétrocompatibilité et dépréciation : Bien que animation-name soit largement supportée dans la plupart des navigateurs modernes, il est important de vérifier la compatibilité avec des versions plus anciennes de navigateurs. Certains navigateurs peuvent avoir des restrictions ou des bogues concernant les animations.
• Héritabilité : La propriété animation-name n'est pas héritée par défaut. Cela signifie que si vous appliquez une animation à un parent, les éléments enfants ne recevront pas automatiquement cette animation à moins que cela ne soit explicitement défini.
• Valeurs possibles : La valeur de animation-name est généralement un identifiant alphanumérique faisant référence à une règle @keyframes définie ailleurs dans le CSS. Si aucun nom d'animation n'est spécifié, aucune animation n'a lieu. Cette propriété peut aussi être laissée vide pour arrêter une animation en cours.
• Accessibilité et animations : Les animations doivent être utilisées avec précaution, notamment pour les utilisateurs souffrant de troubles de la vision ou d'autres problèmes de santé. L'animation excessive ou trop rapide peut entraîner des distractions ou des malaises. Il est recommandé de permettre aux utilisateurs de désactiver les animations dans les paramètres du système ou de l'application pour un meilleur confort d'utilisation.