Quelle est l’accélération CSS par défaut ?

Les transitions et animations utilisent ease par défaut, soit cubic-bezier(0.25, 0.1, 0.25, 1) : un départ rapide et une fin en douceur.

Comment créer un dépassement ou un rebond ?

Faites glisser une poignée au-dessus de 1 ou en dessous de 0. easeOutBack, cubic-bezier(0.34, 1.56, 0.64, 1), dépasse la fin puis revient se poser. Une seule courbe de Bézier cubique ne peut pas rebondir plusieurs fois ; utilisez pour cela des keyframes ou la fonction linear().

Puis-je utiliser la même valeur pour les animations ?

Oui. La valeur fonctionne dans transition-timing-function, animation-timing-function et l’option easing de la Web Animations API.

Générateur de courbes de Bézier

Façonnez des courbes d’accélération CSS en faisant glisser deux poignées. Comparez le mouvement avec une progression linéaire et copiez cubic-bezier() pour vos transitions ou Tailwind.

Éditeur de courbe

Faites glisser l’une des poignées. La ligne pointillée représente une progression linéaire.

Aperçu du mouvement

Votre courbe

Linéaire

Position à chaque dixième de la durée

transition: transform 1000ms ease;
/* or */
animation-timing-function: ease;

Tout reste dans votre navigateur.

Références des formats

MDN — cubic-bezier()
W3C — CSS Easing Functions Level 1

Page de l’outil mise à jour le : 2026-10-25

Éditeur de courbe

Aperçu du mouvement

Guide et exemple

Outils associés

Références des formats