Éditeur Cubic Bezier

Éditeur Cubic Bezier - Générateur Visuel d'Easing CSS

Concevez des courbes d'easing CSS sur mesure avec un éditeur visuel interactif. Faites glisser deux points de contrôle pour modeler n'importe quelle fonction cubic-bezier(), observez l'animation en direct et comparez-la aux mots-clés standards comme ease-in-out. Copiez le code CSS prêt à coller dans vos transitions.

Qu'est-ce qu'une fonction cubic-bezier() en CSS ?

Une fonction cubic-bezier() décrit comment une transition ou animation CSS progresse dans le temps. Au lieu d'avancer à vitesse constante, l'animation peut accélérer, décélérer, dépasser sa cible ou rebondir selon une courbe définie par quatre nombres.

Syntaxe : cubic-bezier(x1, y1, x2, y2)

La courbe commence toujours en (0, 0) et finit en (1, 1). Les deux points de contrôle P1 = (x1, y1) et P2 = (x2, y2) déforment la courbe. L'axe X représente le temps (0 à 1) et l'axe Y la progression de l'animation.

Si la courbe monte vite au début, l'animation démarre rapidement. Si elle monte lentement puis accélère, on obtient un ease-in. Quand les valeurs Y sortent de [0, 1], l'animation dépasse sa cible — c'est ainsi que naissent les effets back/bounce.

Comment utiliser cet éditeur cubic-bezier ?

Trois façons de créer votre courbe :

1. Faites glisser les deux poignées bleues sur le canevas pour remodeler la courbe visuellement. Elles correspondent à P1 et P2 dans cubic-bezier(x1, y1, x2, y2).
2. Saisissez des valeurs exactes dans les champs X1/Y1/X2/Y2 si vous avez besoin de précision.
3. Cliquez sur n'importe quel préréglage (ease, ease-in-out, ease-out-back, etc.) pour charger une courbe reconnue et la modifier.

Appuyez ensuite sur Lire pour voir une balle animée selon votre easing. Le menu Comparer lance une seconde balle avec un mot-clé CSS standard, pour visualiser la différence. Le code CSS s'affiche en bas — cliquez sur Copier pour le coller dans votre feuille de style.

Pour l'accessibilité, les poignées reçoivent le focus avec Tab et bougent avec les flèches du clavier (Maj pour des pas plus grands).

Différence entre ease, ease-in, ease-out et ease-in-out ?

Ce sont les quatre mots-clés d'easing standards de CSS, chacun équivalent à une valeur cubic-bezier() précise :

- ease : cubic-bezier(0.25, 0.1, 0.25, 1) — départ rapide, fin lente. Valeur par défaut si vous n'indiquez pas de timing function.
- ease-in : cubic-bezier(0.42, 0, 1, 1) — départ lent, accélère vers la fin. Utile quand un élément quitte l'écran.
- ease-out : cubic-bezier(0, 0, 0.58, 1) — départ rapide, décélère à la fin. Idéal pour les éléments qui entrent à l'écran.
- ease-in-out : cubic-bezier(0.42, 0, 0.58, 1) — lent aux deux extrémités, rapide au milieu. Symétrique et naturel.

Note : 'linear' équivaut à cubic-bezier(0, 0, 1, 1) — vitesse constante sans easing. Pour la plupart des animations UI, ease-out reste le choix le plus soigné car il évoque une inertie physique.

Que sont les courbes overshoot et anticipation ?

Les courbes overshoot poussent l'animation au-delà de sa valeur finale avant de se stabiliser, créant un effet de rebond ou « back » dynamique. Les courbes anticipation font l'inverse : elles reculent légèrement avant d'avancer, imitant la façon dont un objet réel prend de l'élan.

En cubic-bezier(), cela s'obtient avec des valeurs Y hors de [0, 1] :

- Overshoot (ease-out-back) : cubic-bezier(0.34, 1.56, 0.64, 1) — le Y du deuxième point dépasse 1, la courbe franchit 100 % avant de se stabiliser.
- Anticipation (ease-in-back) : cubic-bezier(0.36, 0, 0.66, -0.56) — le Y du deuxième point est négatif, la valeur passe momentanément sous 0.
- Fort des deux côtés : cubic-bezier(0.68, -0.6, 0.32, 1.6).

Cet éditeur autorise Y entre -2 et 2 pour expérimenter librement. Ces easings excellent sur les modales, les coches de succès et toute animation qui demande du caractère.

Où utiliser la valeur cubic-bezier() générée ?

Collez la valeur dans n'importe quelle propriété CSS timing-function. Les deux cas les plus fréquents :

1. transition-timing-function sur une transition :
.button {
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

2. animation-timing-function sur @keyframes :
.card {
animation: fadeIn 600ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

La valeur marche aussi dans les bibliothèques d'animation :
- Framer Motion : transition={{ ease: [0.34, 1.56, 0.64, 1] }}
- GSAP : gsap.to(el, { x: 100, ease: 'cubicBezier(0.34, 1.56, 0.64, 1)' })
- Web Animations API : el.animate(frames, { easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' })

Certains systèmes comme Material Design 3 publient des tokens cubic-bezier recommandés — saisissez-les dans X1/Y1/X2/Y2 pour les visualiser.

Pourquoi les valeurs X sont-elles limitées à 0–1 ?

Les coordonnées X (x1 et x2) doivent rester entre 0 et 1, et cet éditeur applique cette contrainte automatiquement. Raison mathématique : l'axe X représente le temps, qui doit avancer de manière monotone. Si un point de contrôle quittait [0, 1] ou reculait, la courbe pourrait se replier sur elle-même, donnant deux progressions différentes pour un même instant — un comportement non défini en CSS.

Les valeurs Y, elles, peuvent sortir librement de [0, 1]. Y représente la progression, qui peut dépasser la cible (Y > 1) ou reculer temporairement (Y < 0). C'est ce qui rend possibles les effets back/bounce.

Si vous saisissez un X hors plage, l'éditeur le ramène automatiquement à 0 ou 1.

En quoi diffère-t-il de CSS spring() ou linear() ?

cubic-bezier() est la fonction d'easing originale de CSS, supportée par tous les navigateurs depuis 2008. Elle utilise deux points de contrôle pour décrire une courbe.

Alternatives plus récentes :

- Fonction linear() (CSS Easing Functions Level 2) : décrit un easing comme une liste de points. Utile pour des courbes arbitraires ou mesurées — par exemple, des ressorts à rebonds multiples qu'un bezier ne peut pas représenter. Supporté par Chromium moderne, Safari 17.4+ et Firefox 112+.

- @starting-style et view transitions s'appuient toujours sur les fonctions d'easing standards comme cubic-bezier().

- La physique spring (Framer Motion, React Spring) est un modèle différent : il simule un système masse-ressort au lieu d'évaluer une courbe fixe.

Pour le CSS en production aujourd'hui, cubic-bezier() reste le plus compatible et le plus prévisible. Utilisez linear() quand vous avez besoin d'un vrai rebond multi-pics qu'un bezier seul ne sait pas faire.

L'outil est-il privé ? Envoie-t-il mes courbes quelque part ?

Totalement privé. Tout se passe dans votre navigateur :

- Aucune donnée n'est envoyée à un serveur
- Pas de compte, pas d'inscription, aucun suivi de votre édition
- Fonctionne hors-ligne après le chargement de la page
- Aucune bibliothèque externe n'est chargée pour l'éditeur — c'est du JavaScript pur
- Le code CSS produit ne quitte votre appareil que si vous choisissez de le copier

Vérifiez-le en ouvrant l'onglet Réseau de votre navigateur pendant que vous éditez : aucune requête ne sera émise. Seules apparaissent la charge initiale et les ressources communes du site (polices, icônes).

Fonctionnalités Clés

• Éditeur de courbe interactif par glisser-déposer
• Deux poignées de contrôle déplaçables, courbe mise à jour en direct
• Balle d'aperçu qui rejoue votre easing
• Comparaison côte à côte avec les mots-clés CSS standards
• Durée d'animation réglable de 0,2 s à 4 s
• 12 préréglages d'easing nommés (ease, ease-in-out, ease-out-back, etc.)
• Champs numériques pour des coordonnées X/Y précises
• Supporte overshoot et anticipation (Y de -2 à 2)
• Génère du code CSS cubic-bezier() prêt à copier
• Exporte transition-timing-function et animation-timing-function
• Poignées accessibles au clavier avec navigation par flèches
• Compatible Framer Motion, GSAP et Web Animations API
• 100 % côté client, aucune donnée envoyée à un serveur
• Fonctionne hors-ligne après le premier chargement
• Mode sombre et mise en page responsive adaptée au mobile