Visualiseur CSS Easing
éditeur cubic-bezier
cubic-bezier(0.25, 0.1, 0.25, 1)
Faites glisser les points de contrôle de la courbe de Bézier et observez l'animation en temps réel. Bibliothèque de 30+ préréglages, comparaison côte à côte et sortie CSS pour transition-timing-function.
P1 (x1, y1)
P2 (x2, y2)
courbe
Apercu anime
Duree (ms)
0.8s
Presets rapides
Les courbes d'easing définissent le rythme d'une animation CSS : la différence entre une interface qui semble mécanique et une qui semble fluide et naturelle réside presque toujours dans le choix de la timing function.
Ce visualiseur permet de :
- Dessiner des courbes cubic-bezier personnalisées en faisant glisser les points de contrôle
- Observer l'animation résultante appliquée à un objet exemple en temps réel
- Comparer plusieurs courbes côte à côte pour choisir le timing optimal
- Parcourir une bibliothèque de 30+ préréglages catégorisés (ease, bounce, elastic, back, expo)
- Copier la valeur cubic-bezier() pour les transitions CSS et animations @keyframes
- Visualiser la correspondance avec steps() pour les animations image par image
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.