Comment utiliser : Générateur Cubic Bezier
- Faites glisser les deux poignées violettes pour façonner la courbe, ou saisissez directement les quatre nombres.
- Appuyez sur Lecture pour comparer votre courbe à un easing standard comme
ease. - Pour un mouvement physique, passez en mode Ressort ou Rebond et ajustez la raideur, l'amortissement ou les rebonds.
- Copiez la valeur pour CSS, Tailwind, l'API Web Animations, Framer Motion ou GSAP.
Qu'est-ce qu'un easing cubic-bezier ?
Une courbe d'accélération associe le temps (axe x) à la progression (axe y). cubic-bezier(x1, y1, x2, y2) décrit cette courbe à l'aide de deux points de contrôle ; le point de départ (0,0) et le point d'arrivée (1,1) sont fixes. Les courbes qui montent rapidement donnent une impression de réactivité (ease-out), celles qui démarrent doucement une impression de lourdeur (ease-in), et les valeurs de y supérieures à 1 ou inférieures à 0 créent un dépassement, pour un effet « retour » ludique. Les valeurs de x doivent rester comprises entre 0 et 1.
Quel easing utiliser ?
| Mouvement | Easing | Pourquoi |
|---|---|---|
| Élément qui entre à l'écran | ease-out (ex. cubic-bezier(.16,1,.3,1)) | Arrive vite, se stabilise en douceur |
| Élément qui sort | ease-in | Accélère pour s'éloigner |
| Déplacement à l'écran | ease-in-out | Démarrage et arrêt naturels |
| Interface ludique, interrupteurs | back / spring | Un léger dépassement donne du dynamisme |
| Barres de progression, spinners | linear | Vitesse constante |
Ressorts et rebonds avec linear()
Un cubic-bezier ne peut dépasser sa cible qu'une seule fois. Un vrai ressort oscille plusieurs fois et une balle qui rebondit touche le sol à répétition : cela nécessite la fonction CSS linear(), qui consiste en une liste de valeurs de progression que le navigateur relie par des segments droits. Cet outil simule un ressort (raideur, amortissement, masse) ou une balle rebondissante, l'échantillonne dans linear() et indique la durée nécessaire pour que le mouvement se stabilise. linear() fonctionne dans Chrome et Edge 113+, Firefox 112+ et Safari 17.2+ ; utilisez le cubic-bezier de secours pour les anciens navigateurs.
Utilisez votre courbe dans le générateur d'animations CSS ou pour vos loaders avec le générateur de loaders CSS.
Aussi recherché comme : easing css, cubic-bezier css, fonctions d'accélération css, animation ressort css, générateur d'easing css, courbe bezier css, linear() css.
Outils complémentaires : Générateur Cubic Bezier
- Générateur Keyframes CSS — Un éditeur visuel pour @keyframes.
- Générateur d'animations CSS au survol — Concevez des animations au survol pour boutons, cartes, liens et icônes.
- Calculateur de colliers de serrage — Saisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une valeur adaptée au zoom clamp() , accompagnée d’explications mathématiques, d’un aperçu en temps réel et d’une échelle complète de la typographie fluide ou de l’espacement.
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
Questions fréquentes
Les valeurs de y peuvent-elles dépasser 1 ou descendre sous 0 ?
Comment utiliser un cubic-bezier avec Tailwind ?
ease-[cubic-bezier(0.16,1,0.3,1)], ou ajoutez-la à theme.extend.transitionTimingFunction. Le panneau de résultat affiche les deux formats.