✨ Le cours : donner vie à l'interface
Une animation bien dosée guide le regard (un bouton qui réagit, un élément qui apparaît en douceur) ; mal dosée, elle fatigue, ralentit la page et peut même rendre malade. Cette fiche couvre les transitions, les transformations et les animations, avec leurs bonnes pratiques.
Transition ou animation ?
| Transition | Animation (@keyframes) |
|---|
| principe | passer d'un état A à un état B | dérouler une séquence d'étapes |
| déclenchement | un changement : survol, focus, ajout d'une classe | tout seul au chargement, ou quand la classe est ajoutée |
| étapes | deux (départ, arrivée) | autant qu'on veut (0 %, 40 %, 100 %…) |
| répétition | non | oui (animation-iteration-count) |
| à utiliser pour | retours visuels (boutons, menus) | chargements, entrées en scène, effets en boucle |
Les propriétés d'une transition
transition: propriété durée courbe délai. On peut animer plusieurs propriétés avec des durées différentes en les séparant par des virgules. La transition se déclare sur l'élément dans son état de départ : ainsi elle joue aussi au retour (quand le survol cesse).
| Propriété | Rôle | Exemple |
|---|
transition-property | ce qui s'anime | transform, opacity, background-color |
transition-duration | durée | 0.25s (250 ms) |
transition-timing-function | accélération | ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(…), steps(4) |
transition-delay | attente avant le départ | 0.1s |
transform : déplacer, tourner, agrandir
transform modifie le dessin d'un élément sans changer la place qu'il occupe dans la page (les voisins ne bougent pas). Ses fonctions : translate(x, y), scale(n), rotate(45deg), skew(…). On peut les combiner en une seule déclaration (elles s'appliquent dans l'ordre) ; transform-origin déplace le point autour duquel on tourne ou on agrandit.
.carte:hover {
transform: translateY(-4px) rotate(-1deg) scale(1.02);
}
.aiguille {
transform-origin: left center; /* tourne autour de son extrémité gauche */
transform: rotate(45deg);
}
@keyframes : décrire une séquence
On nomme la séquence puis on l'applique avec animation. Les étapes se donnent en pourcentage de la durée (0%, 50%, 100%) ou avec from et to. Ci-dessous, un indicateur de chargement : un cercle gris dont la partie haute est colorée, qui tourne en continu à vitesse constante (linear).
@keyframes tourne {
to {
transform: rotate(360deg);
}
}
.chargement {
width: 40px;
height: 40px;
border: 4px solid #cbd5e1;
border-top-color: #2563eb;
border-radius: 50%;
animation: tourne 0.8s linear infinite;
}
RenduUn cercle gris dont un quart est bleu, qui tourne sans fin.
Les propriétés d'animation
| Propriété | Valeurs usuelles |
|---|
animation-name | le nom donné dans @keyframes |
animation-duration | 0.4s, 1.5s |
animation-timing-function | comme pour les transitions |
animation-delay | attente avant le départ (une valeur négative démarre « en cours de route ») |
animation-iteration-count | 1, 3, infinite |
animation-direction | normal, reverse, alternate (aller-retour) |
animation-fill-mode | forwards garde l'état final ; backwards applique l'état initial pendant le délai ; both les deux |
animation-play-state | running ou paused |
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.badge {
animation: pulse 1.5s ease-in-out infinite;
}
Animer sans ralentir la page
Pour chaque image, le navigateur calcule la mise en page, dessine, puis compose les calques. Animer width, height, top, left ou margin oblige à recalculer toute la mise en page à chaque image : saccades assurées sur un téléphone modeste. transform et opacity sont gérés directement par la carte graphique, sans recalcul : anime-les en priorité. Pour déplacer un élément, préfère translate à left. will-change: transform prévient le navigateur qu'un élément va bouger, mais à utiliser avec parcimonie.
Déclencher une transition avec JavaScript
Un script n'a pas besoin d'animer lui-même : il ajoute ou retire une classe, et la transition CSS fait le reste.
.menu {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.menu.ouvert {
transform: translateX(0);
}
document.querySelector("#bouton").addEventListener("click", () => {
document.querySelector(".menu").classList.toggle("ouvert");
});
Respecter les personnes sensibles au mouvement
Certaines personnes (troubles vestibulaires, migraines, épilepsie photosensible) peuvent être gênées voire malades à cause des animations. Elles le disent à leur système, et ton CSS peut le lire avec prefers-reduced-motion. Voici une règle de sécurité courante (un des rares cas où !important est justifié) :
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Évite aussi les effets qui clignotent plus de trois fois par seconde, et donne le moyen d'arrêter tout contenu qui bouge en continu (voir Accessibilité).
