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 de la fonction de minutage cubic-bezier() utilisée par les transitions et animations CSS, conçu pour les développeurs front-end et les motion designers. Choisissez un préréglage comme ease, linear, ease-in, ease-out ou ease-in-out, ou ajustez vous-même les deux points de contrôle : les valeurs x sont bornées à la plage légale de 0 à 1, tandis que les valeurs y peuvent dépasser 1 ou descendre sous 0 pour créer un dépassement (overshoot) et une anticipation. L'aperçu trace la courbe sur un carré unité pour que vous lisiez d'un coup d'œil l'accélération et la décélération, et la déclaration exacte cubic-bezier(x1, y1, x2, y2) est produite pour que vous la copiiez. Utilisez-le chaque fois qu'un mot-clé intégré semble trop générique et que vous voulez un mouvement plus vif, plus élastique ou plus posé.

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

1. Ouvrez les Paramètres et choisissez un préréglage de départ — ease, linear, ease-in, ease-out ou ease-in-out — pour initialiser les points de contrôle.
2. Faites glisser les deux poignées rondes sur l'aperçu de la courbe pour remodeler l'accélération, ou saisissez des valeurs exactes dans les champs x1, y1, x2 et y2.
3. Gardez x1 et x2 entre 0 et 1 ; poussez y1 ou y2 au-dessus de 1 ou en dessous de 0 pour ajouter du dépassement ou de l'anticipation au mouvement.
4. Comparez la courbe à la ligne de base linéaire en pointillés pour juger comment l'accélération accélère et décélère.
5. Copiez la valeur cubic-bezier() générée et collez-la 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, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

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

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.

Pourquoi ne puis-je pas régler x1 ou x2 au-dessus de 1 ?

La spécification CSS impose que les coordonnées x (temps) des deux points de contrôle restent entre 0 et 1, afin que la fonction de minutage demeure une correspondance valide entre progression et sortie. Cet outil borne automatiquement les champs x et les poignées à cette plage. Les valeurs y, en revanche, peuvent dépasser 1 ou descendre sous 0 pour créer du dépassement ou de l'anticipation.

Comment créer une accélération rebondissante ou élastique ?

Poussez l'une des valeurs y au-dessus de 1 (pour un dépassement à la fin) ou en dessous de 0 (pour une anticipation au début). Par exemple, cubic-bezier(0.34, 1.56, 0.64, 1) dépasse avant de se stabiliser, donnant une sensation de ressort sans aucun JavaScript.

Où utiliser la valeur générée ?

Collez-la comme valeur de transition-timing-function ou animation-timing-function — par exemple transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Elle remplace des mots-clés comme ease ou ease-in-out par votre courbe personnalisée.

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.