Créer des interfaces fluides et performantes
Utilisez les flèches, cliquez ou glissez pour naviguer
Créer des transitions fluides entre deux états CSS
Utiliser les propriétés transition de manière efficace
Utiliser les fonctions de timing (ease, ease-in-out, cubic-bezier)
Maîtriser les courbes de Bézier pour des animations naturelles
Appliquer des transformations 2D (translate, rotate, scale)
Comprendre pourquoi transform est performant
Créer des animations multi-étapes avec @keyframes
Respecter l'accessibilité avec prefers-reduced-motion
Transitions : le concept de changement animé entre deux états
Comprendre comment CSS interpole les valeurs
Les 4 propriétés transition : property, duration, timing-function, delay
Syntaxe complète et raccourcis
Transform : translate, rotate, scale — et pourquoi c'est performant
GPU acceleration et composite layers
@keyframes : animations multi-étapes, animation-fill-mode
Créer des séquences complexes
Live coding : construire une page avec des hover effects, un loader animé, et un menu qui slide
Mise en pratique des concepts
Une transition est un changement animé entre deux états CSS
CSS interpole automatiquement les valeurs entre l'état initial et l'état final
.button {
background: blue;
transition: background 0.3s;
}
.button:hover {
background: red;
}
Quelles propriétés animer ?
transition-property: background, transform;
transition-property: all; // ⚠️ attention
Combien de temps ?
transition-duration: 0.3s;
transition-duration: 300ms;
Comment évolue l'animation ?
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
Attendre avant de commencer
transition-delay: 0.1s;
transition-delay: 100ms;
💡 Raccourci pratique :
transition: background 0.3s ease 0.1s;
La courbe de vitesse de votre animation
Survolez les cercles pour voir la différence
Départ lent, milieu rapide, fin lente
Départ lent, fin rapide
Départ rapide, fin lente
Départ et fin lents
4 points de contrôle pour définir votre propre courbe :
cubic-bezier(x1, y1, x2, y2)
// Exemples courants :
cubic-bezier(0.4, 0, 0.2, 1) // Material Design
cubic-bezier(0.68, -0.55, 0.265, 1.55) // Elastic
Les transformations visuelles les plus performantes
Déplacement X/Y
translate(10px, 20px)
Rotation en degrés
rotate(45deg)
Agrandissement/réduction
scale(1.5, 0.8)
💡 Combinaison possible :
transform: translate(10px) rotate(45deg) scale(1.2);
🚀 Ces propriétés ne déclenchent pas de reflow/layout
🐌 Ces propriétés forcent le navigateur à recalculer toute la page
🎯 Règle d'or :
Toujours préférer transform: translate() plutôt que left/top pour les animations
Définir des séquences complexes avec plusieurs points de contrôle
@keyframes monAnimation {
/* Étape 1 : Début */
0% {
transform: translateX(0);
opacity: 0;
}
/* Étape 2 : Milieu */
50% {
transform: translateX(100px);
opacity: 1;
}
/* Étape 3 : Fin */
100% {
transform: translateX(200px);
opacity: 0.5;
}
}
Nom du @keyframes à utiliser
animation-name: monAnimation;
Durée de l'animation
animation-duration: 2s;
Nombre de répétitions
animation-iteration-count: infinite;
Sens de l'animation
animation-direction: alternate;
Que se passe-t-il AVANT et APRÈS l'animation ?
forwards : Garde l'état final (100%)
backwards : Applique l'état initial (0%) dès le début
both : Combine forwards + backwards
Respecter les préférences utilisateur est OBLIGATOIRE
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
🎯 Règle d'accessibilité :
Les animations doivent servir l'UX, pas être décoratives. Less is more!
Construisons des animations pratiques ensemble
Boutons et cartes interactifs
Loader CSS pur performant
Navigation avec transform
🚀 Prêt à coder ?
Nous allons appliquer tous les concepts vus précédemment
Boutons et cartes avec des transitions fluides
.button {
transition: all 0.3s;
}
.button:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
Hover to see the effect!
.card {
transition: transform 0.3s;
}
.card:hover {
transform: scale(1.05) rotate(1deg);
}
Loader CSS pur avec @keyframes
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
.dot {
animation: bounce 1.4s infinite ease-in-out;
}
Menu latéral avec transform et transition
.menu {
transform: translateX(-100%);
transition: transform 0.3s;
}
.menu.open {
transform: translateX(0);
}
✅ Avantages :
🚀 Performance GPU : Seules les propriétés transform et opacity sont accélérées par le GPU — les animer est quasi gratuit
⚡ Éviter le reflow : Animer width, height, margin, padding déclenche un reflow complet — toujours préférer transform
♿ Accessibilité obligatoire : prefers-reduced-motion est OBLIGATOIRE pour l'accessibilité
🎯 UX first : Les animations doivent servir l'UX, pas être décoratives — less is more
❌ transition: all 0.3s;
✅ transition: background 0.3s, transform 0.2s;
Peut causer des animations inattendues et affecter la performance
❌ transition-duration: 1s; (pour un hover)
✅ transition-duration: 200ms; (max 300ms)
L'UI paraît lente et non réactive
❌ .modal { transform: scale(1); }
✅ .modal { transform: scale(0); } .modal.show { transform: scale(1); }
L'animation ne fonctionne pas si l'état de départ n'est pas défini
❌ animation-iteration-count: infinite; (sur un élément statique)
✅ animation-iteration-count: 1; (ou seulement pour les loaders)
Fatigue visuelle et distraction inutile
🎯 Transitions : Pour les changements entre deux états (hover, focus, etc.)
🎬 Animations : Pour les séquences multi-étapes complexes
⚡ Performance : Toujours utiliser transform + opacity
♿ Accessibilité : prefers-reduced-motion n'est pas optionnel