Guide d'utilisation
Une animation CSS associe une règle @keyframes (les étapes) à la propriété animation (durée, timing, répétition). Privilégiez l'animation de transform et opacity pour de meilleures performances.
- Utilisez
animation-iteration-count: infinitepour une boucle. - Respectez
prefers-reduced-motionpour l'accessibilité.
FAQ
Comment relancer une animation en JS ?
Retirez puis réappliquez la classe d'animation après un reflow (par ex. en lisant element.offsetWidth) pour forcer le redémarrage.
Quelles propriétés animer pour la performance ?
transform et opacity sont accélérées par le GPU et n'entraînent pas de recalcul de mise en page.