Éditeur d'accélération cubic-bézier
Concevez des courbes d'accélération cubic-bezier personnalisées avec un éditeur déplaçable et un aperçu d'animation en direct.
Faites glisser les deux poignées pour façonner la courbe d'accélération.
transition-timing-function: -;
animation-timing-function: -;
Tout s'exécute dans votre navigateur, rien n'est envoyé.
À propos de Éditeur d'accélération cubic-bézier
L'Éditeur d'Accélération Cubic-Bézier conçoit des fonctions de temporisation personnalisées pour les transitions et animations CSS. Faites glisser les deux poignées de contrôle sur le canevas de la courbe et la valeur cubic-bezier(x1, y1, x2, y2) se met à jour en direct ; un aperçu d'animation joue l'accélération à côté d'une référence linéaire pour que vous ressentiez la différence, avec une durée ajustable et une relecture instantanée.
Dix préréglages couvrent le vocabulaire courant : l'ease standard, ease-in, ease-out et ease-in-out, plus des courbes expressives comme back et anticipate qui dépassent leurs points finaux, et des rampes d'accélération et de décélération façon material design. Utilisez-les tels quels ou comme points de départ à faire glisser vers quelque chose de personnel.
Vous pouvez aussi saisir des coordonnées exactes de points de contrôle, cliquer sur aléatoire pour de l'inspiration, et copier soit la valeur cubic-bezier() brute, soit une règle CSS prête à coller. L'éditeur entier fonctionne dans votre navigateur.
Comment utiliser Éditeur d'accélération cubic-bézier
- Faites glisser les deux poignées sur l'éditeur de courbe pour façonner l'accélération.
- Cliquez sur Relecture et comparez l'animation accélérée à la référence linéaire, en ajustant la durée si nécessaire.
- Essayez les préréglages (ease, back, anticipate, material et plus) pour un point de départ rapide.
- Affinez avec les saisies numériques des points de contrôle pour des valeurs exactes.
- Copiez la valeur cubic-bezier() ou l'extrait CSS complet.