Handytool
DéveloppeurGratuitExécuté localement

Éditeur de bezier cubique

Concevez visuellement les courbes d'assouplissement CSS cubic-bezier — faites glisser les poignées, visualisez le mouvement et copiez le CSS.

CSS
cubic-bezier(0.25, 0.1, 0.25, 1)
Aperçu
Préréglage

Faites glisser les poignées vertes ou utilisez les curseurs pour ajuster la courbe.

À propos de Éditeur de bezier cubique

L'éditeur cubic-bezier de Handytool vous permet de concevoir les courbes d'assouplissement CSS de la manière prévue — en faisant glisser les deux points de contrôle jusqu'à ce que le mouvement se sente correct. Commencez par un préréglage familier (ease, linear, ease-in-out) et affinez à partir de là ou déplacez librement les poignées pour inventer la vôtre. Une animation de balle en direct reproduit la courbe pour que vous puissiez ressentir le timing avant de coller cubic-bezier(...) dans votre transition.

Fonctionnalités de Éditeur de bezier cubique

  • 01

    Faites glisser la courbe, voyez le mouvement

    Deux poignées glissables contrôlent le début et la fin du bezier. L'animation de balle d'accompagnement reproduit la courbe à la durée de votre choix, afin que vous puissiez visualiser l'effet d'overshoot et d'ease-out sans quitter la page.

  • 02

    Tous les préréglages standard

    Commencez par les ease, linear, ease-in, ease-out et ease-in-out intégrés à CSS — puis affinez. Le commutateur de préréglage revient à "personnalisé" automatiquement lorsque vous déplacez une poignée.

  • 03

    Copie CSS en un clic

    La valeur cubic-bezier() se met à jour en direct avec une précision de deux décimales, prête à être déposée dans transition-timing-function ou animation-timing-function.

FAQ Éditeur de bezier cubique

Pourquoi les valeurs Y peuvent-elles aller au-dessus de 1 ou au-dessous de 0 ?
Les points de contrôle de Bezier en dehors de la plage 0–1 produisent des effets d'overshoot et d'undershoot — la courbe dépasse son point final avant de se stabiliser. C'est ainsi que les courbes d'assouplissement "bouncy" sont faites; l'axe X doit encore rester dans 0–1.
Comment utiliser la sortie ?
Copiez la chaîne cubic-bezier(...) et collez-la dans n'importe quelle valeur CSS transition-timing-function ou animation-timing-function. Cela fonctionne dans tous les navigateurs modernes.
L'aperçu est-il précis pour ce que CSS fera ?
Oui — l'aperçu anime une balle de 0 à 100% en utilisant la même formule cubic bezier que les navigateurs utilisent pour les transitions. Le curseur de durée vous permet de ressentir les courbes lentes par rapport aux courbes rapides avant de vous engager.
Que signifie réellement ease-in-out ?
Ease-in-out commence lentement, accélère au milieu et ralentit à nouveau à la fin — la courbe cubic-bezier(0.42, 0, 0.58, 1). C'est le paramètre par défaut pour la plupart des mouvements d'interface soignés car il reflète comment les objets physiques réels accélèrent et décélèrent.

Outils liés

Développeur →

Explorez d'autres outils

Tous les outils →