Visualiseur CSS Easing

éditeur cubic-bezier

cubic-bezier(0.25, 0.1, 0.25, 1)

Le Visualiseur CSS Easing vous aide a creer, tester et ajuster des fonctions de timing cubic-bezier() pour vos transitions CSS. Modifiez les quatre points de controle, reglez la duree et verifiez le rendu anime immediatement.

P1 (x1, y1)

P2 (x2, y2)

courbe

x1 y1 x2 y2

Apercu anime

Duree (ms) 0.8s

Presets rapides

Comment lire une courbe cubic-bezier

Les valeurs x1 et x2 doivent etre entre 0 et 1 pour une progression temporelle valide.
Les valeurs y1 et y2 peuvent depasser 0-1 pour creer des effets d'overshoot ou d'acceleration plus marques.
Comparez les presets pour trouver la sensation de mouvement adaptee a chaque composant UI.

Utilisez ce visualiseur pour micro-interactions, effets hover, ouverture de panneaux et transitions d'etat en gardant une motion design coherente.