Animation CSS

Les types d’animations CSS

• Transitions CSS — animent le passage d’un état à un autre (exemple : changement de couleur au survol d’un bouton). Syntaxe simple avec la propriété transition.
• Animations par keyframes — animations plus complexes définies par étapes (0%, 50%, 100%) avec la règle @keyframes. Permettent des animations indépendantes d’une interaction.
• Transformations — translate, rotate, scale, skew. Ne modifient pas le layout de la page (donc performantes) et se combinent avec les transitions et animations.

Les propriétés clés

• transition-duration — durée de l’animation (0.2s pour une transition rapide, 0.5s pour une transition plus marquée).
• transition-timing-function — courbe de l’animation : linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier() pour du sur-mesure.
• animation-delay — temps d’attente avant le démarrage de l’animation. Utile pour créer des effets en cascade.
• animation-iteration-count — nombre de répétitions (1, 2, infinite).
• will-change — indique au navigateur qu’une propriété va changer, permet d’optimiser les performances.

Les bonnes pratiques d’animation

• Privilégier transform et opacity — ces propriétés sont gérées par le GPU et sont très performantes. Animer width, height, margin ou left/top est beaucoup moins efficace.
• Durées courtes — les micro-interactions doivent durer 150-300ms. Au-delà, l’interface semble lente.
• Easing naturel — préférer ease-out (décélération) pour les apparitions, ease-in (accélération) pour les disparitions. Linear est rarement adapté.
• Animations subtiles — les animations doivent renforcer l’UX, pas la distraire. Un site avec trop d’animations devient fatigant.
• Respecter prefers-reduced-motion — certains utilisateurs sont sensibles aux mouvements. Utiliser la media query @media (prefers-reduced-motion) pour désactiver les animations.

Cas d’usage des animations

• Boutons interactifs — changement de couleur ou léger agrandissement au survol pour indiquer qu’un élément est cliquable.
• Apparitions au scroll — éléments qui apparaissent progressivement en scrollant (fade-in, slide-in). Efficace pour guider l’attention.
• Indicateurs de chargement — spinners, barres de progression, pulsations pour montrer que quelque chose se passe.
• Menus et dropdowns — ouverture/fermeture fluide des menus déroulants et accordéons.
• Micro-interactions — vibration légère d’un input en erreur, cocher animé d’un checkbox, confirmation de soumission de formulaire.
• Hero animée — éléments qui apparaissent en cascade au chargement de la page pour capter l’attention.

Animations et performance

Les animations peuvent impacter les Core Web Vitals, notamment le CLS (Cumulative Layout Shift). Quelques précautions :

• Ne pas animer les dimensions — éviter width/height/margin qui causent du reflow. Préférer transform: scale() qui est rendu par le GPU.
• Limiter les animations simultanées — trop d’animations en parallèle peuvent saturer le CPU/GPU, surtout sur mobile.
• Désactiver pour les utilisateurs sensibles — respecter prefers-reduced-motion pour l’accessibilité.

Animations et WordPress / Elementor

Elementor Pro offre des contrôles d’animation intégrés : fade in, slide in, bounce, flip, rotate, zoom. On peut définir la durée, le délai et le déclenchement (au chargement, au scroll). Ces animations sont suffisantes pour 90% des usages sur un site vitrine ou institutionnel.

Besoin d’un site web au design professionnel ?