Syntaxe de @keyframes et propriété d’animation

Les animations CSS permettent de modifier des propriétés en plusieurs étapes au fil du temps grâce à @keyframes. Contrairement aux transitions, elles démarrent automatiquement ou lors de l’ajout d’une classe et prennent en charge des séquences complexes.

Définissez les étapes de l’animation à l’aide de pourcentages (de 0 % à 100 %) ou de mots-clés indiquant le début et la fin :

Appliquez une animation à un élément à l’aide de la notation abrégée animation ou de ses sous-propriétés :

Référence la règle @keyframes par son nom :

Définit la durée d’un cycle de l’animation :

Utilisez des images clés en pourcentage pour créer des animations complexes en plusieurs étapes :

Chaque étape d’image clé peut animer plusieurs propriétés simultanément :

La fonction de minutage peut être définie pour chaque étape d’image clé. Elle contrôle l’accélération entre des points de passage individuels plutôt que pour l’ensemble de l’animation.

Appliquez plusieurs animations à un même élément en utilisant des valeurs séparées par des virgules :

Mettez les animations en pause et reprenez-les dynamiquement :

Choisissez judicieusement :

• Transition : deux états, déclenchée par un changement d’état, simple
• Animation : plusieurs étapes, démarrage autonome, répétition en boucle, contrôle accru

Quel mot-clé de @keyframes représente l’état initial de l’animation ?

Définissez les étapes d’une animation avec @keyframes en utilisant from/to ou des points de passage en pourcentage. Appliquez-la avec la notation abrégée animation, en indiquant le nom, la durée, le minutage et le mode de remplissage. Séparez les animations multiples par des virgules. Utilisez les transitions pour des changements simples entre deux états et les animations pour des séquences complexes.