Transitions : propriété, durée et rythme
Ajoutez une transition pour animer en douceur les changements de propriétés CSS, choisissez des durées adaptées et sélectionnez des fonctions d’accélération comme ease-in-out.
Transitions : propriété, durée et rythme est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce qu'une transition CSS ?
Une transition CSS anime une propriété d'une valeur à une autre lorsqu'elle change (au survol, lors de la sélection ou de l'activation d'une classe). Elle est déclarative : vous indiquez à CSS quelles propriétés faire transiter et comment ; le navigateur s'occupe du reste.
Syntaxe de base
transition: property duration timing-function delay. Vous pouvez répertorier plusieurs transitions en les séparant par des virgules.
.btn {
background: #6366f1;
transition: background-color 0.2s ease;
}
.btn:hover {
background: #4f46e5;
}
// Browser smoothly animates the colour changeValeur de la propriété
Indiquez quelles propriétés faire transiter. Utilisez all pour faire transiter chaque propriété animable, mais cela peut déclencher des transitions indésirables sur des propriétés sans rapport. Soyez explicite pour garantir les performances et la prévisibilité.
.card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.15s linear;
}
/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }Durée — pendant combien de temps
Indiquez la durée d'une transition en s (secondes) ou en ms (millisecondes). Utilisez des durées courtes (100–200 ms) pour les micro-interactions, des durées moyennes (200–400 ms) pour les changements d'état des composants et des durées plus longues (400 ms et plus) pour les animations à l'échelle de la page.
Fonctions de temporisation — la sensation produite
Les fonctions de temporisation contrôlent la courbe d'accélération. Valeurs courantes : ease (valeur par défaut : début lent, milieu rapide, fin lente), linear (vitesse constante), ease-in (démarrage lent), ease-out (fin lente), ease-in-out. Courbes personnalisées : cubic-bezier(x1, y1, x2, y2).
.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }Délai — Quand commencer
Le délai d’une transition démarre l’animation après une durée spécifiée. Utilisez-le pour décaler plusieurs éléments ou éviter les déclenchements accidentels au survol lors de mouvements rapides de la souris.
.dropdown-menu {
opacity: 0;
transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
opacity: 1;
}Événement transitionend
JavaScript peut détecter la fin d’une transition grâce à l’événement transitionend. C’est utile pour supprimer des éléments après une disparition progressive ou déclencher l’étape suivante d’une séquence.
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && element.style.opacity === '0') {
element.remove();
}
});Transformer des éléments
La propriété transform est accélérée par le GPU et idéale pour les transitions. Transformations courantes : translate(), scale(), rotate(), skew(). Animer transform et opacity déclenche uniquement la composition — c’est le chemin le plus rapide.
.card {
transform: translateY(0) scale(1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}Quelles propriétés peuvent être animées par transition ?
Toute propriété ayant une valeur numérique peut être animée par transition : opacity, couleur, transform, width, height, padding, border, font-size. Les propriétés comme display et visibility n’offrent pas une transition fluide — utilisez plutôt opacity pour une apparition ou une disparition progressive.
En pratique : apparition progressive d’une fenêtre modale
Une fenêtre modale apparaît progressivement et s’agrandit à partir d’une taille légèrement réduite. Appliquez la classe .open avec JavaScript ; CSS gère l’animation.
.modal {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.modal.open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}Performances : privilégiez transform et opacity
Animer des propriétés qui déclenchent la mise en page (width, height, margin, top, left) coûte cher : le navigateur recalcule la mise en page à chaque image. Privilégiez transform et opacity pour des animations fluides à 60 images par seconde.
Vérification rapide
Quelle propriété CSS devriez-vous privilégier pour l’animation afin d’obtenir les meilleures performances ?
Récapitulatif : transitions CSS
transition : propriété durée fonction de temporisation délai. Animez des propriétés précises, et non « all ». Utilisez ease, ease-out et ease-in-out pour un mouvement naturel. Écoutez transitionend pour enchaîner les actions. Privilégiez transform et opacity pour les performances. Utilisez des changements de classe en JS pour déclencher les transitions.
Questions Fréquemment Posées
La leçon « Transitions : propriété, durée et rythme » est-elle gratuite ?
Oui — le texte complet de « Transitions : propriété, durée et rythme » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Transitions : propriété, durée et rythme » ?
Ajoutez une transition pour animer en douceur les changements de propriétés CSS, choisissez des durées adaptées et sélectionnez des fonctions d’accélération comme ease-in-out. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Transitions : propriété, durée et rythme » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Propriétés personnalisées CSS : déclaration et mise à jour
- Transitions : propriété, durée et rythme
- Animations @keyframes
- Respecter prefers-reduced-motion