Français
Dessine des courbes d'easing CSS sur mesure avec aperçu animé en direct.
Dernière mise à jour
.element {
transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}Une *fonction d'easing* en CSS contrôle l'accélération et la décélération d'une animation. Les mots-clés ease, ease-in, ease-out et ease-in-out sont des raccourcis vers quatre courbes précises. Pour tout le reste, CSS te donne cubic-bezier() - une fonction à quatre nombres qui dessine une courbe sur mesure.
Ces quatre nombres sont les coordonnées de deux points de contrôle (x1, y1, x2, y2). À la main, c'est rébarbatif : de petits changements ont de gros effets visuels, et les petits dépassements produisent un mouvement *bondissant* qu'on ne lit pas dans les chiffres. Un éditeur visuel te laisse tirer les poignées et voir la courbe réagir - beaucoup plus rapide que d'écrire des décimales.
L'éditeur Coddy dessine la courbe en temps réel, anime une balle d'aperçu avec ton easing et propose des presets pour les motifs courants : les mots-clés CSS, la courbe *standard* de Material Design, un bouncy-out et un anticipate avec dépassement. Copie la chaîne cubic-bezier() et colle-la dans ton CSS - tout dans le navigateur.
linear - progression constante par unité de temps.Choisis un preset proche du ressenti visé. *Material standard* et *Bouncy out* sont de bons points de départ en UI ; *ease-out* est la valeur sûre pour les entrées.
Les ronds colorés sont les deux points de contrôle. Tire le premier pour ajuster le *début* ; le second pour ajuster la *fin*. Sortir une poignée par le haut produit du dépassement.
Mets une durée réaliste. Les transitions UI tournent à 150–300ms ; les mouvements d'emphase à 400–600ms. Clique *Replay* pour relancer l'aperçu.
Pour des valeurs précises, tape dans X1/Y1/X2/Y2. Y peut sortir de 0..1 ; X reste toujours dans 0..1.
Clique *Copier* pour récupérer la règle transition complète. Colle dans ta feuille de styles et remplace transform par la propriété animée.
Easings courants et le cubic-bezier correspondant. Les quatre mots-clés sont des alias de courbes précises.
| Easing | Valeurs cubic-bezier | Quand l'utiliser |
|---|---|---|
ease | (0.25, 0.1, 0.25, 1) | Défaut de transition - doux mais générique |
linear | (0, 0, 1, 1) | Vitesse constante - souvent faux en UI, juste pour les spinners |
ease-in | (0.42, 0, 1, 1) | Début lent, fin rapide - idéal pour les sorties |
ease-out | (0, 0, 0.58, 1) | Début rapide, fin lente - idéal pour les entrées et réactions |
ease-in-out | (0.42, 0, 0.58, 1) | Symétrique - bon pour les bascules aller-retour |
| Material standard | (0.4, 0, 0.2, 1) | Mouvement UI moderne et vif |
| Bouncy out | (0.18, 0.89, 0.32, 1.28) | Dépasse puis se pose - entrées joueuses |
.btn { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover { transform: translateY(-2px);}L'essentiel de l'élan se fait tôt, puis s'amortit - ça paraît réactif au curseur plutôt que mou.
.card { transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}Y2 à 1.28 fait dépasser la cible avant de revenir. À utiliser avec parcimonie - partout, le rebond devient fatigant.
.hero { transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}Un Y1 négatif fait partir l'animation à *contre-sens* un court instant. Hérité de l'animation classique - une petite anticipation rend le mouvement principal plus intentionnel.
ease-in pour des entrées. Démarre lentement et termine vite - l'inverse de ce qui paraît réactif. Préfère ease-out.linear pour de l'UI parce qu'il paraît neutre. La vitesse constante semble mécanique ; c'est juste pour des barres de progression et des spinners.cubic-bezier() ?cubic-bezier(x1, y1, x2, y2). Le premier façonne le *début*, le second la *fin*. X reste entre 0 et 1 (temps) ; Y peut sortir de 0..1 pour le dépassement et l'anticipation (progression).cubic-bezier(0.4, 0, 0.2, 1). Pour les sorties, *ease-in* convient. *linear* uniquement pour les barres de progression.ease et ease-out ?ease démarre aussi en douceur. ease-out part à pleine vitesse et décélère - ce mouvement *immédiat* paraît plus réactif que ease.cubic-bezier(0.18, 0.89, 0.32, 1.28) dépasse de ~28 % avant de se stabiliser. Pour plusieurs rebonds il faut @keyframes ou une lib spring - cubic-bezier ne fait qu'un seul dépassement.@keyframes ?animation-timing-function, dans le raccourci animation ou par keyframe. Pour des mouvements en plusieurs étapes, tu peux appliquer un easing différent entre chaque paire de keyframes.