Comment créer une courbe d'easing cubic-bezier personnalisée pour CSS ?

Faites glisser les deux poignées de points de contrôle sur le graphique, saisissez les valeurs exactes x1, y1, x2, y2, ou choisissez un préréglage. Ensuite, choisissez CSS sous Format de sortie et cliquez sur Copier pour obtenir la valeur cubic-bezier() pour transition-timing-function.

Comment créer un effet de rebond ou de dépassement avec cubic-bezier ?

Faites glisser une poignée au-dessus ou en dessous de la boîte pour que sa valeur Y dépasse 0-1. Y peut dépasser cette plage, tandis que X reste entre 0 et 1. Les préréglages de retour arrière et d'anticipation sont des points de départ prêts à l'emploi pour le dépassement.

Puis-je obtenir l'easing pour Tailwind, Framer Motion ou anime.js ?

Oui. Les onglets de format de sortie sont CSS, Tailwind, Framer Motion et anime.js. Ils formatent tous les quatre mêmes nombres, alors choisissez un onglet et cliquez sur Copier pour mettre l'extrait dans votre presse-papiers.

Comment charger une valeur cubic-bezier existante pour la modifier ?

Collez une valeur telle que cubic-bezier(.17, .67, .83, .67) dans la zone d'importation et cliquez sur Charger. Si quatre nombres ne peuvent pas être lus, vous obtenez un message d'erreur. La courbe est également stockée dans l'URL de la page après le dièse, elle peut donc être partagée.

Pourquoi l'aperçu semble-t-il plus lent que mes transitions réelles ?

L'Aperçu du mouvement utilise un paramètre de Durée que vous pouvez modifier, et les valeurs par défaut sont plus lentes pour que vous puissiez étudier la courbe. Raccourcissez la Durée, puis utilisez Rejouer pour voir le mouvement à la vitesse que vous prévoyez d'utiliser.

Est-ce vraiment gratuit ?

Oui. Tous les outils sont gratuits, sans compte et sans carte bancaire. Le traitement se fait sur votre appareil plutôt que sur nos serveurs, et c'est ce qui permet de garder le service gratuit.

Fonctionne-t-il sur mobile ?

Oui. Il fonctionne dans les navigateurs mobiles récents sur iOS et Android, sans rien à installer.

📈

Générateur d'easing CSS Cubic-Bezier — outil gratuit

Concevez des courbes d'easing CSS en faisant glisser les points de contrôle, prévisualisez le mouvement en direct et copiez la valeur cubic-bezier(). Comprend des préréglages de dépassement et de rebond.

S'exécute dans votre navigateurSans inscription ni pop-upsAucune connexion requiseGratuit pour toujours

Fonctionne hors ligne une fois chargé

Faites glisser les poignées sarcelle et rose pour modeler la courbe

Points de contrôle

x1y1x2y2

Aperçu du mouvement

Durée1,6s

Transition de largeur

Valeur CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Préréglages

Les poignées rose et sarcelle peuvent dépasser le cadre (Y hors de 0–1) pour créer des effets de dépassement/rebond comme back-out et anticipate. X reste dans 0–1 (le temps ne peut pas s'inverser).

Utilisations courantes

Assouplissement des Transitions CSS PersonnaliséConcevez un assouplissement à l'apparence naturelle pour les effets de survol, les menus et les transitions d'interface utilisateur.
Animations de Rebond et DépassementCréez un mouvement ludique de ressort/rebond en tirant les points de contrôle au-delà de la boîte.
Assouplissement pour Animations @keyframesChoisissez la fonction de synchronisation d'animation correcte pour les animations de keyframe CSS.
Valeurs d'Assouplissement pour Bibliothèques d'Animation JSObtenez les valeurs cubic-bezier pour GSAP, Framer Motion, anime.js et plus.
Comprendre Comment Fonctionne l'AssouplissementVoyez la relation entre une courbe de Bézier et le mouvement qu'elle produit.

Comment ça marche

L'éditeur est construit entièrement dans le navigateur avec l'état React et le SVG — aucune bibliothèque ne gère les calculs de courbe. Deux points de contrôle déplaçables définissent un chemin de Bézier cubique SVG, et le propre moteur d'animation CSS du navigateur exécute l'aperçu de mouvement en injectant la valeur cubic-bezier() résultante directement dans une règle @keyframes.

1
Faire glisser ou saisir les points de contrôle
Deux poignées (P1 en sarcelle, P2 en rose) se trouvent sur un canevas SVG. Le glissement utilise l'API Pointer Events avec setPointerCapture afin que la poignée suive votre doigt ou curseur même en dehors des limites du SVG. Vous pouvez aussi ajuster les poignées avec les touches fléchées ou saisir des valeurs exactes dans les champs numériques x1/y1/x2/y2.
2
Le SVG dessine la courbe en temps réel
La courbe est un unique élément SVG <path> dont la commande C (Bézier cubique) est recalculée à partir des quatre coordonnées de points de contrôle à chaque mise à jour d'état. Aucun canevas, aucune bibliothèque externe — le moteur de rendu SVG du navigateur dessine le chemin directement.
3
Le moteur CSS du navigateur prévisualise l'accélération
Trois animations en direct (un point glissant, une transition de largeur, et une échelle) exécutent des @keyframes CSS avec la valeur cubic-bezier() injectée en ligne. Le propre moteur d'animation du navigateur interprète la courbe, ce que vous voyez est donc exactement ce que votre CSS de production produira.
4
Copiez l'extrait dans la syntaxe de votre framework
Des onglets formatent les mêmes quatre nombres comme une transition-timing-function CSS, une classe Tailwind à valeur arbitraire, un tableau d'accélération Framer Motion, ou une chaîne d'accélération anime.js. L'extrait est écrit dans le presse-papiers avec navigator.clipboard. La courbe est aussi encodée dans le hash de l'URL (#b=x1,y1,x2,y2) afin que vous puissiez la partager ou la mettre en favori.

Outils associés

🎚️

Fondu audio entrée/sortie

Ajoutez un fondu d'entrée et un fondu de sortie à n'importe quel extrait audio avec la courbe de votre choix, prévisualisée en direct sur la forme d'onde.

EssayerFichiers locaux

💬

Éditeur de sous-titres

Modifiez les sous-titres SRT/VTT dans un tableau, prévisualisez-les en direct sur votre vidéo et exportez.

EssayerFichiers locaux

🟦

Générateur CSS Grid

Concevez visuellement une grille CSS — pistes, unités et espacements — et copiez le CSS et le HTML générés.

Essayer