animation

Syntaxe

Paramètres

Description

Cette propriété permet d'indiquer toutes les propriétés d'animation.

Remarques

• Propriété raccourcie : La propriété animation est une propriété raccourcie combinant plusieurs propriétés liées aux animations CSS, telles que animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode et animation-play-state. Cela permet de définir toutes ces propriétés en une seule déclaration concise.
• Contrôle du nom de l'animation : La valeur animation-name associée spécifie le nom d'une animation définie à l'aide de @keyframes. Si aucun nom valide n'est fourni, l'animation ne sera pas exécutée, ce qui peut causer des comportements inattendus si une faute de frappe ou une absence de règle @keyframes existe.
• Durée obligatoire pour un effet visible : Sans une valeur explicite pour animation-duration, contrôlant la durée de l'animation, l'animation n'aura pas d'effet visible. La valeur par défaut est 0s, ce qui signifie que l'animation ne se produit pas. Il est donc crucial de définir une durée lorsque vous utilisez cette propriété.
• Fonction de timing flexible : La propriété inclut la capacité de définir animation-timing-function, contrôlant la vitesse de l'animation dans le temps. Les valeurs peuvent inclure des fonctions comme ease, linear, ease-in, ease-out, ou des courbes de Bézier personnalisées, offrant des transitions fluides ou dynamiques adaptées aux besoins spécifiques.
• Gestion des répétitions : Avec animation-iteration-count, vous pouvez contrôler combien de fois une animation est exécutée. Les valeurs peuvent être un nombre entier ou infinite pour des animations répétées indéfiniment. Cela est utile pour les animations décoratives, comme des arrière-plans dynamiques.
• Direction de l'animation : La valeur animation-direction permet de jouer une animation dans le sens normal (normal), en sens inverse (reverse), en alternance (alternate), ou en alternance inversée (alternate-reverse). Cela offre plus de flexibilité pour créer des effets complexes sans définir plusieurs animations.
• Début différé avec animation-delay : Vous pouvez retarder le début d'une animation en utilisant animation-delay. Cela permet d'orchestrer plusieurs animations sur une page pour qu'elles se produisent dans un ordre précis. Les valeurs négatives sont également acceptées, indiquant que l'animation commence en plein milieu.
• Effet avant et après l'animation : Avec la propriété animation-fill-mode, vous pouvez contrôler l'apparence d'un élément avant que l'animation ne commence ou après qu'elle se termine. Par exemple, avec forwards, l'élément conserve le dernier style de l'animation, tandis qu'avec backwards, il adopte le premier style dès le début du délai.