Qu'est-ce qu'une fonction de bézier cubique ?

Une courbe définie par 4 valeurs de contrôle — utilisée par les transitions et animations CSS pour contrôler le taux de changement au fil du temps. La 'facilité' du navigateur est cubic-bezier(0.25, 0.1, 0.25, 1).

Qu'est-ce que le dépassement (overshoot) ?

Lorsque la courbe d'accélération dépasse 0 ou 1 (valeurs y de contrôle 1), l'animation 'rebondit' au-delà de ses points d'extrémité. Utile pour les interfaces utilisateur ludiques.

Des préréglages sont-ils disponibles ?

Oui — les préréglages courants (linear, ease, ease-in, ease-out, ease-in-out) ainsi que quelques courbes personnalisées populaires.

L'éditeur est-il gratuit ?

Oui — entièrement gratuit, sans inscription.

Couleur & Design

Éditeur de courbe de Bézier

Éditeur de courbe de Bézier gratuit. Concevez visuellement les courbes d'accélération CSS avec des poignées de déplacement, des préréglages et un aperçu d'animation en direct. Copiez le CSS pour les transitions et animations.

Runs in your browser

Cubic-bezier editor

x10.25

y10.1

x20.25

y21

CSS

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

Note de la rédaction

Understanding · Time, but with feeling.

Ce chapitre approfondi n'est actuellement disponible qu'en anglais. L'outil de conversion ci-dessus fonctionne dans votre langue ; le long article explicatif n'a pas encore été traduit.

Questions fréquentes

Quick answers.

›What's a cubic-bezier?

A curve defined by 4 control values — used by CSS transitions and animations to control the rate of change over time. The browser's 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1).

›What's overshoot?

When the easing curve exceeds 0 or 1 (control y-values < 0 or > 1), the animation 'bounces' past its endpoints. Useful for playful UIs.

›Are presets available?

Yes — common presets (linear, ease, ease-in, ease-out, ease-in-out) plus a few popular custom curves.

›Is the editor free?

Yes — fully free, no signup.

Les internautes recherchent aussi

Outils similaires

More in this room.

Tout voir dans Couleur & Design