Générateur de Cubic Bezier CSS
Faites glisser les deux poignées pour dessiner une courbe d’easing, regardez un point la parcourir face à un autre à vitesse constante, et copiez la valeur cubic-bezier().
cubic-bezier(0.25, 0.1, 0.25, 1)La courbe est dessinée dans votre navigateur. Rien de ce que vous réglez ici n’est envoyé à BroBroGo.
FAQ
Que signifient les deux poignées et les quatre nombres ?
La courbe va du coin inférieur gauche (le début) au coin supérieur droit (la fin) : le temps se lit de gauche à droite et la progression vers le haut. Les deux poignées sont les points de contrôle qui la courbent ; chacun a un X et un Y, donc ensemble ils forment cubic-bezier(x1, y1, x2, y2). Le X reste entre 0 et 1, tandis que le Y peut passer au-dessus ou en dessous du cadre pour que le mouvement dépasse sa cible ou recule avant de se stabiliser.
Comment utiliser cette valeur dans mon CSS ?
Copiez le cubic-bezier() et placez-le partout où va une fonction de temps : transition-timing-function, animation-timing-function ou la forme abrégée, par exemple transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Les mots-clés ease, ease-in, ease-out et ease-in-out ne sont que des courbes cubic-bezier fixes ; choisir l’un de ces préréglages vous montre donc la valeur exacte derrière le mot-clé.
Peut-il produire un effet de rebond ou élastique ?
Pas à lui seul. Une seule cubic-bezier peut anticiper et dépasser sa cible — les préréglages « back » tirent une poignée hors du cadre précisément pour cela — mais elle ne peut aller que dans un sens avant de se stabiliser. Le rebond et l’élastique changent de direction plusieurs fois, ce qu’aucune cubic-bezier unique ne peut exprimer ; il faut alors des keyframes CSS ou la fonction linear() avec de nombreux points.