Module 3Aller plus loin
Chapitre 12 sur 15
Transitions, transformations et animations
Donner du mouvement à une page avec transition, transform et @keyframes.
- ≈ 120 min
- 4 leçons
- 2 vidéos
- 3 exercices
Module 3Aller plus loin
Chapitre 12 sur 15
Donner du mouvement à une page avec transition, transform et @keyframes.
Objectifs
Avec ce chapitre, tu sauras…
transition ;ease, linear, ease-out…) ;transform ;@keyframes et animation ;prefers-reduced-motion.Un bouton qui change de couleur progressivement au survol, une carte qui se soulève légèrement, un message qui apparaît en fondu : ces petits mouvements rendent une interface plus agréable et plus compréhensible. Le CSS sait les faire sans une ligne de JavaScript.
Leçon 1
.bouton {
background-color: #2f5bc4;
transition: background-color 0.3s ease; /* propriété, durée, courbe */
}
.bouton:hover {
background-color: #17306e;
}Tableau: Les propriétés de transition
| Propriété | Rôle | Exemple |
|---|---|---|
transition-property | quelle propriété animer | background-color, transform, all |
transition-duration | durée | 0.3s, 200ms |
transition-timing-function | courbe d'accélération | ease, ease-out, linear |
transition-delay | délai avant de commencer | 0.1s |
transition | raccourci | transition: transform 0.2s ease-out, box-shadow 0.2s; |
| Valeur | Mouvement | Usage |
|---|---|---|
ease (défaut) | démarre vite, finit en douceur | usage général |
linear | vitesse constante | rotations continues, barres de progression |
ease-in | démarre lentement, accélère | éléments qui sortent de l'écran |
ease-out | démarre vite, ralentit | éléments qui entrent ; survols |
ease-in-out | lent, rapide, lent |
Vidéo · À regarder
FRFormation CSS, tuto complet pour démarrer
L'instant Code · YouTube
Leçon 2
| Fonction | Effet | Exemple |
|---|---|---|
translate(x, y) | déplace | translate(0, -4px) : monte de 4 px |
translateX(), translateY() | déplace sur un axe | translateX(100%) |
scale(n) | agrandit ou réduit | scale(1.05) : +5 % |
rotate(angle) |
Leçon 3
| Propriété | Rôle | Exemples |
|---|---|---|
animation-name | le nom du @keyframes | apparition |
animation-duration | durée d'un cycle | 0.6s |
animation-timing-function | courbe | ease-out, linear |
animation-delay | délai |
Leçon 4
1Où écrit-on la propriété transition ?
2Quelle courbe convient le mieux à un élément qui entre à l'écran ?
3Pour une animation fluide, on anime de préférence…
4rotate(0.5turn) équivaut à…
5Pour qu'une animation se répète sans fin :
6animation-fill-mode: forwards…
L'essentiel du chapitre
transition: propriété durée courbe délai; sur l'état de base ; 150 à 300 ms pour un survol.ease, ease-out (entrée), ease-in (sortie), linear (continu).transform : translate(), scale(), rotate(), skew() ; ne modifie pas le flux.transform et opacity pour la fluidité ; éviter width, top, margin.@keyframes nom { from {} to {} } ou en %, puis animation: nom durée courbe délai répétitions direction fill-mode;.@media (prefers-reduced-motion: reduce).| déplacements d'un point à un autre |
cubic-bezier(...) | courbe sur mesure | effets « rebond » |
rotate(45deg), rotate(0.5turn) |
skew(angle) | incline | skew(-10deg) |
| plusieurs | s'appliquent dans l'ordre | transform: translateY(-4px) scale(1.02); |
0.2s |
animation-iteration-count | nombre de répétitions | 1, 3, infinite |
animation-direction | sens | normal, reverse, alternate (aller-retour) |
animation-fill-mode | état avant / après | forwards (garde l'état final), both |
animation-play-state | pause | running, paused |
animation | raccourci | animation: tourne 1s linear infinite; |
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
La transition s'écrit sur l'état de base (.bouton), pas sur l'état final (.bouton:hover). Ainsi, l'animation joue dans les deux sens : à l'arrivée de la souris et à son départ.
Tableau: Les courbes d'accélération
Une interface doit rester réactive : 150 à 300 ms pour un survol ou un bouton, 300 à 500 ms pour un élément qui apparaît (menu, fenêtre). Au-delà d'une demi-seconde, l'utilisateur a l'impression d'attendre.
Les animations dans la formation de L'instant Code : quatre minutes et demie pour un premier contact avec le mouvement en CSS.
transform modifie l'apparence d'un élément (position, taille, rotation) sans toucher au flux : les éléments voisins ne bougent pas.
Tableau: Les fonctions de transformation
Une transition va d'un état A à un état B quand quelque chose change. Une animation peut avoir plusieurs étapes, démarrer toute seule, et se répéter.
/* 1. Définir les étapes */
@keyframes apparition {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 2. L'appliquer à un élément */
.hero h1 {
animation: apparition 0.6s ease-out;
}Tableau: Les propriétés d'animation
Certaines personnes (troubles vestibulaires, migraines, épilepsie) sont gênées, voire rendues malades, par les mouvements à l'écran. Elles activent l'option « réduire les animations » de leur système. Respecte-la toujours :
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
Reproduis l'indicateur de chargement de la section 3, puis crée une deuxième version : trois points qui grossissent et rétrécissent l'un après l'autre (utilise un délai différent pour chaque point).
Crée un bouton qui, au survol, devient plus foncé, monte de 2px et gagne une ombre plus marquée, le tout en 0.2s avec ease-out. Au clic (:active), il redescend à sa position d'origine. Au focus clavier, il a un contour visible.
Fais apparaître les trois cartes de projets de ton CV au chargement de la page : chacune part de opacity: 0 et 30px plus bas, et arrive en 0.5s. La deuxième commence 0.15s après la première, la troisième 0.3s après. Aucune carte ne doit être visible avant son animation.
.carte {
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.carte:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgb(23 48 110 / 18%);
}<div style="font-family:Inter,sans-serif;font-size:8pt;color:#fff;text-align:center;padding:12px 0">
<span style="display:inline-block;width:80px;padding:10px 0;background:#2f5bc4;margin:0 14px;transform:translateY(-6px)">translateY(-6px)</span>
<span style="display:inline-block;width:80px;padding:10px 0;background:#17306e;margin:0 14px;transform:scale(1.15)">scale(1.15)</span>
<span style="display:inline-block;width:80px;padding:10px 0;background:#c0392b;margin:0 14px;transform:rotate(-8deg)">rotate(-8deg)</span>
</div>Par défaut, un élément tourne ou s'agrandit autour de son centre. transform-origin change ce point : transform-origin: top left; fait tourner l'élément autour de son coin supérieur gauche, comme une porte autour de ses gonds.
Pour une animation fluide (60 images par seconde), anime de préférence transform et opacity : le navigateur les calcule très efficacement, sans recalculer la mise en page. Animer width, height, top ou margin oblige le navigateur à recalculer toute la page à chaque image : l'animation saccade, surtout sur mobile. Pour déplacer, utilise translate plutôt que left.
@keyframes tourne {
to {
transform: rotate(360deg);
}
}
.chargement {
width: 40px;
height: 40px;
border: 4px solid #dfe8fb;
border-top-color: #2f5bc4; /* un seul côté coloré */
border-radius: 50%;
animation: tourne 0.8s linear infinite;
}@keyframes battement {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.coeur {
animation: battement 1.2s ease-in-out infinite;
}À la fin d'une animation, l'élément reprend ses styles d'origine. Si ton élément commence invisible (opacity: 0 dans from) et a un animation-delay, il est visible pendant le délai, puis disparaît, puis apparaît. Ajoute animation-fill-mode: both (ou le mot both dans le raccourci) pour appliquer le premier état pendant le délai et garder le dernier à la fin.
Le chapitre « Animations » de Dave Gray (anglais) : 47 minutes sur le mouvement en CSS. Découpe-le en deux séances et code chaque exemple.