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().

Préréglages
Points de contrôle
Premier point de contrôle
Deuxième point de contrôle
Aperçu
votre courbe
linear
Valeur
cubic-bezier(0.25, 0.1, 0.25, 1)
Faites glisser une poignée ou choisissez un préréglage pour dessiner la courbe.

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.

Rédigé et vérifié par l'équipe éditoriale de BroBroGo.Dernière mise à jour:

Fonctionnement du Générateur de Cubic Bezier CSS

Le Générateur de Cubic Bezier CSS est un outil visuel conçu pour créer des courbes d'accélération (easing) personnalisées pour vos animations et transitions CSS. L'outil vous permet de dessiner une courbe en faisant glisser deux poignées de contrôle.

Pendant que vous ajustez la courbe, un point se déplace le long de celle-ci afin de démontrer visuellement l'effet d'accélération. Pour faciliter la comparaison, ce mouvement est affiché juste à côté d'un autre point qui se déplace à une vitesse constante (mouvement linéaire). Une fois la courbe ajustée selon vos besoins, l'outil génère la valeur cubic-bezier() correspondante, que vous pouvez copier directement pour l'intégrer dans votre code CSS.

Paramètres d'entrée de l'outil

Pour façonner votre courbe d'easing, vous disposez de plusieurs contrôles et options de saisie:

  • Glissement des deux poignées: Ces poignées physiques vous permettent de modifier directement et visuellement la forme de la courbe d'accélération.
  • Premier point de contrôle X: Une valeur numérique obligatoirement comprise entre 0 et 1.
  • Premier point de contrôle Y: Une valeur numérique comprise entre -0,70 et 1,70.
  • Deuxième point de contrôle X: Une valeur numérique obligatoirement comprise entre 0 et 1.
  • Deuxième point de contrôle Y: Une valeur numérique comprise entre -0,70 et 1,70.
  • Sélection de préréglages: Vous pouvez choisir parmi plusieurs options prédéfinies, notamment "ease", "ease-in", "ease-out", "ease-in-out", "Retour à l’entrée" (Retour à l’entrée), "Retour à la sortie" et "Retour entrée-sortie".

Résultats et valeurs générées

L'interface affiche en temps réel les éléments suivants:

  • votre courbe: Une représentation visuelle claire de la courbe d'easing que vous êtes en train de concevoir.
  • cubic-bezier(x1, y1, x2, y2): La fonction CSS cubic-bezier() exacte avec les coordonnées correspondant à la courbe dessinée.
  • Copied: Un indicateur d'état qui s'affiche temporairement pour confirmer que la valeur a bien été copiée avec succès dans votre presse-papiers. Le processus de copie ne présente qu'un état de réussite, sans message d'erreur ou de rejet explicite.

Règles de saisie et comportements limites

Le générateur applique des règles strictes pour garantir la validité du code CSS produit:

  • La courbe se dessine du coin inférieur gauche (le point de départ) au coin supérieur droit (le point d'arrivée). Le temps progresse horizontalement de gauche à droite, tandis que la progression de l'animation s'effectue verticalement vers le haut.
  • Les valeurs de l'axe X pour les deux points de contrôle sont strictement limitées à l'intervalle entre 0 et 1. Si vous saisissez une valeur invalide (par exemple 9 pour le "Premier point de contrôle X") et que le champ perd le focus, la valeur est automatiquement corrigée et ramenée à 1.
  • Les valeurs de l'axe Y peuvent dépasser les limites de la zone (au-dessus du sommet ou en dessous de la base) et doivent rester comprises entre -0,70 et 1,70. Cela permet de créer des effets d'anticipation (pull-back) ou de dépassement (overshoot).
  • Si vous videz complètement un champ de saisie numérique et que celui-ci perd le focus, l'outil restaure automatiquement la dernière valeur valide enregistrée.
  • Les champs vides ou contenant des caractères non numériques restent en attente d'une saisie complète et valide.
  • Vous pouvez ajuster finement les valeurs au clavier: appuyer sur la touche Flèche gauche lorsqu'une poignée de contrôle a le focus diminuera sa valeur (par exemple, pour atteindre 0.99).
  • Le préréglage "Retour à la sortie" applique précisément la valeur cubic-bezier(0.34, 1.56, 0.64, 1).

Confidentialité et traitement des données

Le respect de votre vie privée est entièrement préservé lors de l'utilisation de cet outil:

  • La courbe est dessinée directement dans votre navigateur web.
  • Aucun des réglages, coordonnées ou paramètres que vous définissez dans l'outil n'est envoyé ou téléchargé vers les serveurs de 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 (le 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.

Générateur de Dégradés CSSCréez un dégradé linéaire, radial ou conique, ajoutez des arrêts de couleur et réglez la direction, puis copiez le CSS en un clic.Générateur de Border RadiusArrondissez chaque coin avec des curseurs, façonnez des formes organiques « blob » avec le mode elliptique, et copiez le CSS aussitôt.Générateur de Flexbox CSSConfigurez un conteneur flex et ses éléments avec des contrôles visuels, voyez la mise en page réagir en direct, puis copiez le CSS en un clic.Générateur de Grid CSSDéfinissez vos colonnes et vos lignes, faites glisser sur les cellules pour placer des éléments, et copiez le CSS de la grille avec son HTML en un clic.Générateur d’Ombres CSSAjustez des curseurs pour façonner un box-shadow, empilez plusieurs couches pour la profondeur, et copiez le CSS obtenu aussitôt.Calculateur de CSS clamp()Définissez une taille pour les petits écrans et une pour les grands, et obtenez une valeur clamp() fluide qui varie en douceur entre les deux — pour les tailles de police, le padding, les marges ou les gaps.