Générateur de Cubic Bezier CSS
Ajustez les deux poignées pour concevoir une courbe d'accélération, observez le mouvement d'un point comparé à une vitesse constante et copiez la valeur cubic-bezier().
cubic-bezier(0.25, 0.1, 0.25, 1)La courbe est tracée directement dans votre navigateur. Rien de ce que vous configurez ici n'est téléversé vers BroBroGo.
FAQ
Que signifient les deux poignées et les quatre nombres?
La courbe s'étend du coin inférieur gauche (le début) au coin supérieur droit (la fin), l'axe horizontal représentant le temps et l'axe vertical représentant la progression. Les deux poignées sont les points de contrôle qui courbent la trajectoire — chacune possède des coordonnées X et Y, formant ensemble l'expression cubic-bezier(x1, y1, x2, y2). La valeur de X reste obligatoirement comprise entre 0 et 1, tandis que Y peut dépasser les limites supérieure ou inférieure pour créer un effet de dépassement ou de recul avant stabilisation.
Comment utiliser cette valeur dans mon code CSS?
Copiez la valeur cubic-bezier() et intégrez-la partout où une fonction de progression temporelle est acceptée — comme transition-timing-function, animation-timing-function, ou dans une propriété raccourcie, 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 correspondent simplement à des courbes cubic-bezier prédéfinies; sélectionner l'un de ces préréglages vous affichera la valeur exacte associée.
Est-il possible de créer un effet de rebond ou élastique?
Pas de façon autonome. Une seule courbe cubic-bezier peut anticiper et dépasser sa cible — les préréglages de type « back » étirent une poignée au-delà des limites de la boîte pour accomplir précisément cela — mais elle ne peut effectuer qu'un seul mouvement d'aller-retour avant de se stabiliser. Les effets de rebond ou élastiques nécessitent plusieurs changements de direction successifs, ce qu'une seule courbe cubic-bezier ne peut pas exprimer; pour ces animations, vous devrez utiliser des keyframes CSS ou la fonction linear() avec plusieurs points d'arrêt.