Pour animer un bouton, faire apparaître un texte ou signaler un chargement, quelques règles CSS suffisent souvent. Le principe : définir les états visuels d’un élément HTML, puis laisser le navigateur calculer leur évolution. Voici deux exemples de code à tester, les critères pour choisir la bonne technologie et les précautions qui rendent une animation réellement utile.
Partir d’une interaction plutôt que d’un effet spectaculaire
Une animation web modifie progressivement l’apparence d’un élément : position, transparence, rotation ou couleur. Elle devient pertinente lorsqu’elle explique quelque chose. Un bouton qui réagit confirme une interaction ; un panneau qui se déploie montre d’où vient le contenu ; un indicateur de chargement signale une attente.
La transition CSS accompagne un changement d’état, par exemple au survol ou à la prise de focus au clavier. Une animation CSS utilise des étapes nommées keyframes : elle peut démarrer au chargement, traverser plusieurs états et se répéter sans nouvelle interaction.
- Bouton ou lien : une transition discrète suffit généralement.
- Texte ou carte : une apparition ponctuelle peut accompagner l’affichage.
- Loader : une rotation répétée indique une opération en cours, sans prétendre en mesurer l’avancement.
- Icône : une transformation peut rendre visible un changement, comme l’ouverture d’un menu.
Pensez le mouvement comme une palette : réservez une même « teinte gestuelle » à une même fonction. Une légère élévation peut désigner les éléments interactifs, un fondu accompagner l’arrivée de contenu et une rotation signaler l’attente. Cette grammaire évite de mélanger rebonds, secousses et glissements sans logique ; le visiteur apprend ainsi à reconnaître les comportements de l’interface.
Deux animations CSS à copier et à modifier
Dans CodePen, placez le balisage dans le panneau HTML et les règles dans le panneau CSS. CodeSandbox convient également, notamment pour tester ensuite l’effet dans un projet plus large. Les exemples suivants ne nécessitent ni bibliothèque ni JavaScript.
Un bouton qui réagit au survol et au clavier
Ce bouton monte légèrement lorsqu’il est survolé ou reçoit le focus au clavier. La transition est déclarée sur son état normal pour adoucir aussi le retour à la position initiale. Le contour reste visible au clavier : l’effet animé ne remplace pas l’indication de focus.
HTML à copier :
<button class="bouton" type="button">Voir le projet</button>
CSS à copier :
.bouton { padding: 12px 20px; border: 0; border-radius: 8px; background: #2457c5; color: white; cursor: pointer; transition: transform 180ms ease-out; } .bouton:hover, .bouton:focus-visible { transform: translateY(-3px); } .bouton:focus-visible { outline: 3px solid #172554; outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .bouton { transition: none; } .bouton:hover, .bouton:focus-visible { transform: none; } }
Modifiez d’abord le déplacement, puis la durée, séparément. Une amplitude trop forte donne l’impression que le bouton fuit le pointeur. Sur écran tactile, le survol n’est pas une interaction fiable : aucune information indispensable ne doit dépendre de cet effet.
Un texte qui apparaît sans rester masqué
Cette seconde animation combine transparence et petit déplacement vertical. Les keyframes décrivent le départ avec from et l’arrivée avec to. Des pourcentages permettent aussi d’ajouter des étapes intermédiaires, par exemple pour une pulsation ou un rebond.
HTML à copier :
<p class="apparition">Votre espace est prêt.</p>
CSS à copier :
.apparition { animation: apparition 500ms ease-out both; } @keyframes apparition { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .apparition { animation: none; } }
La déclaration raccourcie associe ici le nom de l’animation, sa durée, sa courbe d’accélération et son mode de remplissage. Both applique les états des keyframes avant et après l’exécution. Le texte reste naturellement visible si l’animation est désactivée, car aucune opacité nulle n’est imposée dans son style de base.
Pour aller plus loin, animation-delay règle le délai, animation-iteration-count le nombre de répétitions, animation-direction le sens de lecture et animation-play-state la pause. Réservez la valeur infinite aux effets dont la répétition a une véritable fonction.
Choisir entre CSS, JavaScript, SVG et les formats animés
Ces solutions ne s’excluent pas toujours. SVG décrit des formes vectorielles ; CSS ou JavaScript peuvent ensuite les animer. De même, JavaScript peut piloter une animation CSS plutôt que recalculer lui-même chaque image.
| Solution | Usage pertinent | Point de vigilance |
|---|---|---|
| CSS | Transitions, apparitions, rotations, loaders simples | Moins adapté aux scénarios dépendant de nombreux calculs |
| JavaScript | Interactions complexes, séquences, animation liée à des données | Éviter les calculs et modifications inutiles à chaque image |
| SVG | Icônes, tracés et illustrations vectorielles | La complexité augmente avec le nombre de formes animées |
| Canvas | Particules, dessins et scènes redessinées par programmation | Prévoir une alternative accessible au contenu graphique |
| WebGL | Scènes 3D et effets graphiques complexes | Développement et consommation de ressources plus exigeants |
| GIF ou MP4 | Séquence visuelle déjà produite | Contrôle limité pour le GIF ; lecteur à prévoir pour la vidéo |
| Lottie | Illustrations animées exportées pour un lecteur compatible | Vérifier le poids, le lecteur et les fonctions prises en charge |
Le GIF et Flash ont marqué l’histoire des animations web, mais Flash n’est plus une solution à intégrer dans un site moderne. Pour un bouton, commencez par CSS ; pour une illustration vectorielle, examinez SVG ; pour une scène dense ou tridimensionnelle, envisagez Canvas ou WebGL.
LottieFiles propose des ressources gratuites et premium, notamment dans quatre formats : dotLottie, Lottie JSON, MP4 et GIF. Vérifiez pour chaque téléchargement la licence, les conditions d’attribution et les formats réellement proposés. Un fichier Lottie nécessite un lecteur compatible : il ne s’utilise pas comme une simple image.
Tester la fluidité, l’accessibilité et les erreurs courantes
Privilégiez lorsque c’est pertinent transform et opacity. Animer largeur, hauteur ou positionnement peut entraîner des recalculs de mise en page plus coûteux. CSS n’est toutefois pas une garantie automatique de fluidité : de grandes surfaces, des filtres ou de nombreux éléments simultanés peuvent aussi ralentir l’affichage.
Le navigateur peut optimiser l’exécution, sauter certaines images et réduire la fréquence de mise à jour des onglets non visibles. Testez donc sur un téléphone et avec les outils de performance du navigateur, pas seulement sur un ordinateur puissant.
La règle prefers-reduced-motion des exemples respecte la préférence de réduction des mouvements. Évitez les clignotements, limitez les boucles décoratives et prévoyez un moyen de mettre en pause les mouvements prolongés lorsque nécessaire. Un message d’erreur doit rester compréhensible sans secousse ni changement de couleur.
- Rien ne bouge : vérifiez le sélecteur, le nom des keyframes et la durée, nulle par défaut.
- L’effet disparaît : recherchez une règle qui remplace la propriété animation ou transform.
- Le contenu reste invisible : contrôlez l’opacité de base et le comportement sans animation.
- L’effet ne redémarre pas : une animation terminée ne se relance pas automatiquement à chaque clic ; un changement d’état peut nécessiter JavaScript.
Intégrez enfin l’effet à la page réelle : vérifiez le clavier, le tactile, les petits écrans et la lecture sans mouvement. Une animation réussie rend l’action plus claire, sans devenir un obstacle entre le visiteur et son objectif.