Aller au contenu
EN

Générateur de courbe cubic-bezier

Dessinez une courbe d'animation cubic-bezier à la souris, comparez-la à une animation linéaire et copiez la valeur pour transition ou animation.

  • Gratuit
  • Sans inscription
  • Aucun fichier envoyé
  • Windows, Mac, Android, iPhone

Chargement de l'outil…

À propos de cet outil

Réglez précisément la vitesse de vos animations : déplacez les deux points de contrôle de la courbe cubic-bezier, partez de 13 courbes connues (ease, easeOutExpo, easeInOutBack…) et comparez le mouvement à une animation linéaire. La valeur est prête pour transition, animation ou Tailwind.

Dans quels cas l'utiliser ?

Interfaces plus naturelles

Un menu qui s'ouvre avec easeOutExpo démarre vite et se pose en douceur : il paraît plus réactif qu'avec une vitesse constante.

Effets de rebond

Une courbe qui dépasse légèrement 1 (easeOutBack) donne un petit rebond à une fenêtre qui apparaît.

Cohérence d'un design system

Définir deux ou trois courbes maison et les réutiliser partout donne une personnalité cohérente aux animations d'un produit.

Mode d'emploi

  1. Déplacez les deux points de contrôle, ou partez d'une courbe connue.
  2. Lancez la comparaison pour sentir le mouvement.
  3. Copiez la valeur cubic-bezier.

Comment ça marche

Une courbe de Bézier cubique part de (0, 0), arrive en (1, 1) et sa forme est fixée par deux points de contrôle. Le graphique trace 60 points de la courbe ; les poignées se déplacent à la souris ou aux flèches du clavier.

La comparaison anime deux billes avec une transition CSS : l'une avec votre courbe, l'autre en linéaire, sur la même durée. Les mots-clés CSS (ease, ease-in…) sont reconnus et écrits tels quels.

Conseils pour un bon résultat

  • Pour ce qui apparaît, une courbe qui ralentit à l'arrivée (ease-out) ; pour ce qui disparaît, l'inverse.
  • Gardez les rebonds pour les petits éléments : sur un grand panneau, ils fatiguent.
  • Une même courbe pour toutes les transitions d'un site rend l'ensemble cohérent.
  • Testez sur la durée réelle : une courbe se ressent différemment à 200 ms et à 1 s.

Problèmes fréquents et solutions

Le point ne va pas plus loin à droite

Les valeurs horizontales sont limitées entre 0 et 1 : le temps ne peut pas reculer.

L'animation semble saccadée

La courbe n'y est pour rien : animez transform et opacity plutôt que width, top ou margin.

La classe Tailwind ne marche pas

ease-[cubic-bezier(…)] demande Tailwind 3 ou plus récent ; la valeur ne doit pas contenir d'espaces.

Questions fréquentes

Que représente la courbe ?

L'axe horizontal est le temps, l'axe vertical l'avancement de l'animation. Une courbe raide au début démarre vite ; une courbe qui dépasse 1 va au-delà de la cible puis revient (effet rebond).

Quelle différence entre ease, ease-in et ease-out ?

ease-in démarre doucement et finit vite, ease-out démarre vite et ralentit à l'arrivée, ease-in-out ralentit aux deux bouts. ease est une variante plus nerveuse d'ease-in-out.

Pourquoi les points peuvent-ils sortir du cadre ?

Les valeurs verticales peuvent dépasser 0 ou 1 : l'animation recule avant de partir ou dépasse sa cible, comme les courbes « back ».

Où utiliser la valeur ?

Dans transition-timing-function ou animation-timing-function, ou directement dans le raccourci transition: transform 0.3s cubic-bezier(…).

Recherches associées

Toujours bloqué ?

Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.