Outils · CSS · Générateur de courbe cubic-bezier

Générateur de courbe cubic-bezier

Faites glisser une courbe pour créer une valeur d'accélération cubic-bezier(), regardez-la jouer avec une transition CSS en direct, et copiez le code.

Déposez un fichier ici, ou choisissez-en un.

Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.

Comment ça marche

Faites glisser la courbe, ou saisissez directement les quatre nombres X/Y.
Regardez la démo de mouvement en direct - elle exécute une vraie transition CSS avec votre courbe.
Copiez la valeur cubic-bezier() générée.

Questions fréquentes

Pourquoi x ne peut-il aller que de 0 à 1, alors que y peut dépasser ces valeurs ?

C'est une exigence du CSS - x représente le temps, qui ne peut ni reculer ni dépasser la fin de la transition. y est la valeur interpolée, qui peut légitimement dépasser 1 ou descendre sous 0, ce qui donne leur effet aux courbes à rebond (« back »).

Est-ce envoyé quelque part ?

Non. La courbe, le graphique et la démo de mouvement sont générés et affichés entièrement dans votre navigateur.

Puis-je l'utiliser aussi dans animation-timing-function, pas seulement dans transition ?

Oui. La même valeur cubic-bezier() fonctionne dans les deux propriétés.

La démo de mouvement utilise-t-elle vraiment ma courbe, ou une approximation ?

La vraie chose. Le point de la démo se déplace sous une véritable transition CSS réglée exactement sur votre valeur cubic-bezier(), pas une approximation codée à la main.

Outils similaires

Commentaires

Aucun commentaire pour le moment. Soyez le premier à partager votre expérience.