01
Partir d’un préréglage adapté
Pour une apparition, essayez ease-out ; pour un changement d’état, comparez ease et Standard Material. Un choix remplit les quatre coordonnées. Dès que vous modifiez un point, la sélection devient personnalisée.
HTML, CSS et code front-end
Générateur cubic-bezierVoir le mouvement avant de copier
Déplacez les poignées ou saisissez quatre valeurs, puis vérifiez le mouvement avant la copie.
Générateur cubic-bezier
Courbe en entrée
Déplacez les points à la souris ou aux flèches ; Maj augmente le pas.
Résultat CSS
cubic-bezier(0.25, 0.1, 0.25, 1)Aperçu du mouvement
La courbe reste dans ce navigateur et n’est envoyée à aucun serveur.
Options
La diagonale pointillée représente une progression constante.
Courbe mise à jour.
Si une transition paraît brusque, le problème peut venir de son départ ou de son arrivée plutôt que de sa durée. Le Générateur cubic-bezier rend ces deux moments visibles avec des points de contrôle mobiles. Un préréglage sert de départ, puis vous ajustez la courbe.
Collez une fonction existante, gardez sa précision et comparez-la à une droite. Cet éditeur de courbe de Bézier offre un aperçu d’animation basé sur le navigateur pour observer un éventuel dépassement avant de reprendre le CSS.
Pourquoi utiliser le Générateur cubic-bezier ?
Les poignées, les nombres et le rendu du navigateur restent cohérents.
Le dessin et les valeurs restent liés
Les points de contrôle et les champs X1, Y1, X2, Y2 décrivent la même courbe. Le Générateur cubic-bezier charge une fonction déjà utilisée dans votre CSS et conserve les décimales saisies au lieu de les ramener discrètement à deux chiffres.
Une erreur sur X ne masque pas un dépassement sur Y
En CSS, X1 et X2 doivent rester entre 0 et 1 ; Y peut sortir de cet intervalle. Le Générateur cubic-bezier arrête une poignée au bord, mais garde une valeur X invalide tapée pour montrer l’erreur. Y supérieur à 1 permet un dépassement unique.
Trois vérifications avant de réutiliser la courbe
02
Régler le départ et l’arrivée séparément
Le premier point influe surtout sur le départ, le second sur la fin. Le glissement borne X ; une saisie X hors plage reste visible avec une erreur. Y peut être négatif ou dépasser 1 pour anticiper ou dépasser la cible.
03
Rejouer à la durée réelle
L’aperçu part de 1000 ms et ne tourne pas en boucle. Sa durée ne figure pas dans la fonction copiée. Si vous désactivez la mise à jour automatique, Ctrl/Cmd+Entrée calcule le nouveau résultat.
Ajuster, comparer et reprendre le CSS
Quatre moyens de modifier deux points
Glissement, flèches du clavier, champs numériques et import de fonction alimentent les mêmes coordonnées. Une ligne de référence compare la courbe d’accélération CSS à un mouvement uniforme.
Aperçu exécuté par le navigateur
L’animation de démonstration applique directement la fonction cubic-bezier() générée. Elle ne confond pas le paramètre interne de la courbe avec le temps écoulé et ne démarre que sur demande.
Deux formes de copie CSS
Copiez uniquement la fonction ou une déclaration transition-timing-function complète. Après toute modification de l’entrée ou d’une option, la copie reste désactivée jusqu’à l’actualisation.
Valeurs permises et mouvements hors périmètre
- X est borné, Y ne l’est pas
- X1 et X2 doivent appartenir à [0,1]. Le glissement s’arrête aux bords ; une valeur importée ou tapée hors plage est conservée et provoque une erreur localisée. Un Y négatif ou supérieur à 1 reste valable en CSS.
- Une courbe ne simule pas un ressort
- Un seul cubic-bezier() peut anticiper ou dépasser une fois la cible. Il ne représente ni rebonds répétés, ni physique de ressort, ni séquence @keyframes complète.
- La durée concerne uniquement l’aperçu
- Saisissez une durée positive et finie en millisecondes. Elle n’altère pas les quatre valeurs et ne se retrouve pas dans la fonction copiée ; la lecture ne se répète pas automatiquement.
- Export limité à la fonction CSS
- Cet outil ne lit pas une feuille de style complète, un fichier ou une URL. Il ne crée pas de bibliothèque de préréglages, de code Tailwind ou GSAP, ni d’animation complète.
Questions sur le Générateur cubic-bezier
Que signifient les quatre nombres de cubic-bezier() ?
Ce sont les coordonnées X1, Y1, X2 et Y2 de deux points de contrôle. Les extrémités (0,0) et (1,1) sont fixes. X représente le temps d’entrée et Y la progression obtenue.
Pourquoi les valeurs x doivent-elles rester entre 0 et 1 ?
Elles représentent la progression du temps sur le segment. La syntaxe CSS impose cet intervalle aux deux X ; une valeur hors plage rend la fonction invalide. L’outil la signale sans modifier votre texte.
Comment créer une accélération rebondissante ou avec dépassement ?
Placez Y2 au-dessus de 1 ou utilisez le préréglage de dépassement unique. Cela peut dépasser la cible puis revenir, mais une suite de rebonds demande des keyframes ou un modèle de ressort.
Quelle est la différence entre ease et ease-in-out ?
ease a un départ et une fin asymétriques. ease-in-out répartit plus régulièrement l’accélération et le ralentissement, ce qui peut convenir à un aller-retour. Comparez-les avec la même durée.
Puis-je utiliser cette valeur aussi pour animation-timing-function ?
Oui. Copiez la fonction dans animation-timing-function ou dans la propriété raccourcie animation. Vous devez encore définir les étapes, la durée et les répétitions dans votre propre CSS.
Une autre question ?
Essayer le Générateur cubic-bezier sur une transition
Chargez votre fonction actuelle, rejouez-la à la bonne durée puis copiez la valeur valide. Le Générateur cubic-bezier garde les points et les nombres visibles pendant les ajustements.