Générateur de cubic-bezier CSS

Qu'est-ce que Générateur de cubic-bezier CSS ?

Le générateur de cubic-bezier CSS est un éditeur visuel gratuit des fonctions d'accélération utilisées par les transitions et animations CSS, conçu pour les développeurs front-end et les motion designers. En mode cubic-bezier, vous faites glisser deux points de contrôle (ou les saisissez) pour façonner une courbe : les valeurs x restent dans la plage légale de 0 à 1, tandis que les valeurs y peuvent dépasser 1 ou descendre sous 0 pour créer du dépassement et de l'anticipation. Un mode steps() couvre le minutage par paliers avec un nombre de pas réglable et un terme de saut — jump-start, jump-end, jump-none ou jump-both, où step-start et step-end valent steps(1, …). Un aperçu animé en direct joue l'accélération actuelle sur une boîte qui se déplace et se met à l'échelle pendant une durée que vous fixez, vous pouvez superposer n'importe quel préréglage en courbe fantôme pour comparer, et importer une chaîne cubic-bezier() ou steps() existante. Copiez la déclaration exacte pour votre transition-timing-function ou animation-timing-function.

Comment utiliser Générateur de cubic-bezier CSS

1. Choisissez le mode cubic-bezier() ou steps() en haut, ou ouvrez les Paramètres pour partir d'un préréglage comme ease, ease-in-out ou linear.
2. En mode cubic-bezier, faites glisser les deux poignées du graphique ou saisissez des valeurs exactes de x1, y1, x2 et y2 ; poussez y au-dessus de 1 pour du dépassement.
3. En mode steps(), définissez le nombre de pas et choisissez un terme de saut (jump-start, jump-end, jump-none ou jump-both) pour dessiner l'escalier.
4. Appuyez sur Lecture pour lancer l'animation en direct sur la boîte qui se déplace et se met à l'échelle, et ajustez la durée en secondes pour ressentir le rythme.
5. Choisissez une courbe de comparaison dans les Paramètres pour superposer un préréglage en fantôme sur le même graphique, ou collez une valeur dans Importer et appliquez-la.
6. Copiez la valeur cubic-bezier() ou steps() générée dans votre transition-timing-function ou animation-timing-function.

Exemples

x1 0.25, y1 0.1, x2 0.25, y2 1

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

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

mode steps, N 4, jump-end

steps(4, jump-end)

Questions fréquentes

Que signifient les quatre nombres de cubic-bezier ?

Ce sont les coordonnées des deux points de contrôle : x1, y1 pour le premier point et x2, y2 pour le second. La courbe commence toujours à (0,0) et se termine à (1,1) ; les points de contrôle la courbent entre les deux, ce qui contrôle la façon dont la propriété animée accélère et ralentit au fil du temps.

À quoi sert le mode steps() ?

steps() saute entre un nombre fixe de valeurs au lieu d'interpoler en douceur — pratique pour les animations de sprites, les compteurs à saccades ou les effets image par image. Définissez le nombre de pas et un terme de saut : jump-start, jump-end, jump-none ou jump-both. step-start équivaut à steps(1, jump-start) et step-end à steps(1, jump-end).

Comment fonctionne l'aperçu animé en direct ?

Appuyez sur Lecture et la boîte se déplace sur la piste et se met à l'échelle avec votre accélération actuelle, en faisant des allers-retours. Changez la durée en secondes pour la ralentir ou l'accélérer ; il utilise une animation CSS pure avec votre valeur cubic-bezier() ou steps() comme fonction de minutage.

Puis-je importer une valeur d'accélération existante ?

Oui. Collez une valeur cubic-bezier(...) ou steps(...) — ou un mot-clé comme ease-in-out, step-start ou step-end — dans le champ Importer et appliquez-la ; l'éditeur l'analyse à nouveau en points de contrôle ou en réglages de pas.

Mes données sont-elles envoyées à un serveur ?

Non. Tout l'éditeur s'exécute dans votre navigateur en JavaScript — les points de contrôle et la courbe sont calculés localement et jamais envoyés, donc il fonctionne de manière privée et même hors ligne une fois la page chargée.