Adoucir un changement d'état avec transition, déplacer, agrandir ou tourner un élément avec transform, et créer une animation en plusieurs étapes avec @keyframes.
Une pâtisserie de Tétouan veut que ses cartes de gâteaux se soulèvent doucement au survol, que le bouton « Commander » grossisse légèrement et qu'un petit logo tourne pendant le chargement. Ces effets donnent une impression de qualité, et le CSS les fait seul, sans une ligne de JavaScript.
On décrit une animation rebond par ses images clés : au début (0 %), au milieu (50 %) et à la fin (100 %).
Une transition anime le passage d’une valeur à une autre quand l’état change (survol, focus, classe ajoutée).
.carte {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.carte:hover {
transform: translateY(-6px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
On écrit la transition sur l’élément au repos, pas sur :hover : ainsi l’effet joue à l’aller et au retour.
Courbes de vitesse : linear (constante), ease (par défaut), ease-in (démarre lentement), ease-out (finit lentement), ease-in-out.
| Fonction | Effet |
|---|---|
translate(x, y) | déplacer |
scale(1.1) | agrandir (ou réduire avec moins de 1) |
rotate(45deg) | tourner |
skew(10deg) | incliner |
Elles se combinent : transform: translateY(-4px) scale(1.05);.
On décrit les images clés, puis on applique l’animation :
@keyframes tourner {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.logo {
animation-name: tourner;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
/* ou en une ligne : animation: tourner 2s linear infinite; */
}
Une animation doit aider : montrer qu’un bouton est cliquable, attirer l’œil sur un message. Trop d’effets fatiguent. Certains visiteurs demandent à leur système de réduire les animations ; on le respecte avec @media (prefers-reduced-motion: reduce) { ... }.
Une porte qui claque d'un coup surprend ; une porte automatique s'ouvre en une seconde, en douceur. transition transforme un changement brutal (au survol) en mouvement fluide.
.bouton { background: #c0392b; transition: background 0.3s ease; } .bouton:hover { background: #8e2a1f; }
Un dessin animé, ce sont des images clés : au début le ballon est en haut, au milieu il touche le sol, à la fin il est remonté. @keyframes décrit ces images clés, le navigateur dessine les étapes intermédiaires.
@keyframes rebond { 0% { transform: translateY(0); } 50% { transform: translateY(40px); } 100% { transform: translateY(0); } }
Écrivez l'animation qui fait tourner le logo sur lui-même en 2 secondes, à vitesse constante, sans arrêt.
@keyframes tourner { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .logo { animation: tourner 2s linear infinite; }
Expliquez chaque valeur : transition: transform 0.4s ease-in-out 0.1s;
transform : la propriété animée 0.4s : la durée ease-in-out : la courbe (lent au début et à la fin) 0.1s : le délai avant de commencer
Écrivez une animation apparition qui fait passer un message d'invisible (opacity 0, 20px plus bas) à visible et à sa place, en 0,6 s, une seule fois.
@keyframes apparition { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .message { animation: apparition 0.6s ease-out; }