Éditeur cubic-bezier

Faites glisser les deux points de contrôle de la courbe pour créer un easing personnalisé, ou partez d’un préréglage comme ease-in-out et ajustez-le ensuite. Les quatre champs numériques restent synchronisés avec les poignées, vous pouvez donc affiner les valeurs à la main ou à l’œil. Une animation d’aperçu joue votre easing à côté d’une référence linéaire, ce qui permet de voir facilement à quel point la courbe accélère ou ralentit le mouvement par rapport à un rythme constant.

Comment fonctionne l’éditeur de courbe ?

Un easing CSS cubic-bezier() est défini par deux points de contrôle, (x1, y1) et (x2, y2), le début et la fin de la courbe étant fixés à (0,0) et (1,1). Les coordonnées x représentent le temps et restent toujours bornées entre 0 et 1, comme l’exige CSS, mais les coordonnées y, qui représentent la progression, peuvent dépasser cette plage dans cet éditeur (environ -1 à 2), ce qui permet de créer un effet de dépassement où le mouvement rebondit au-delà de sa cible avant de se stabiliser, comme les préréglages intégrés ease-in-back et ease-out-back. En coulisses, l’outil évalue la courbe de la même façon qu’un navigateur : pour un instant donné, il résout le point correspondant sur la courbe avec quelques itérations de la méthode de Newton, et bascule sur une simple bissection si la courbe est trop plate pour que Newton converge rapidement.

Vous pouvez aussi coller directement une valeur cubic-bezier(...) dans les champs numériques, et l’outil la retranscrira en poignées déplaçables, tant que les valeurs x restent dans la plage valide 0-1.

Ce que je dessine est-il envoyé quelque part ?

Non. L’éditeur de courbe, les calculs sous-jacents et l’animation d’aperçu fonctionnent entièrement dans votre navigateur. Rien de ce que vous dessinez n’est envoyé où que ce soit, et aucun serveur n’intervient à aucun moment.

Servez-vous-en pour régler des transitions et animations CSS : un ease-out vif pour le clic d’un bouton, un rebond avec dépassement pour l’apparition d’une fenêtre modale, ou une courbe sur mesure qui correspond à la spécification de mouvement d’un outil de design. Copiez la valeur cubic-bezier() obtenue directement dans votre feuille de style. Consultez la référence easing-function de MDN pour voir comment elle s’intègre à transition-timing-function et animation-timing-function, ou la référence de la fonction cubic-bezier() pour la syntaxe exacte.