Qu'est-ce que les animations CSS ?
Les animations CSS vous permettent d'animer des éléments HTML sans JavaScript. Elles utilisent les règles @keyframes pour définir les états d'animation et la propriété animation pour contrôler la synchronisation, la durée et la répétition. Les animations CSS sont accélérées par le GPU et fonctionnent bien pour les transitions, les effets de survol et les indicateurs de chargement.
Propriétés d'animation
- animation-name : Référence une règle
@keyframes. - animation-duration : Durée d'un cycle (ex. 1s, 500ms).
- animation-timing-function : Courbe de vitesse (ease, linear, ease-in-out, etc.).
- animation-iteration-count : Nombre de répétitions de l'animation (nombre ou
infinite).
Questions fréquemment posées
Les animations CSS sont-elles meilleures que les animations JavaScript ?
Pour les transitions simples et les effets décoratifs, les animations CSS sont souvent plus performantes car elles peuvent être déléguées au GPU. Les animations JavaScript offrent plus de contrôle pour les séquences complexes, interactives ou basées sur la physique.
Puis-je combiner plusieurs animations sur un seul élément ?
Oui. Séparez plusieurs valeurs d'animation par des virgules dans la propriété animation. Chaque animation peut avoir ses propres images clés, durée et fonction de synchronisation.