Générateur de courbes de Bézier cubiques

Taper cubic-bezier(x1, y1, x2, y2) à la main et recharger la page pour vérifier le rendu est une façon lente d’ajuster une animation. Ce générateur boucle la boucle : déplacez l’une des poignées de contrôle sur la courbe, ou saisissez des nombres exacts dans les champs x1/y1/x2/y2, et la courbe, la chaîne CSS copiable ainsi que l’aperçu d’animation en direct se mettent à jour à chaque modification — sans étape de compilation, sans rechargement.

Les deux axes fonctionnent différemment, à dessein. x1 et x2 restent limités entre 0 et 1, car c’est ce que la spécification CSS exige réellement d’une fonction de timing cubic-bezier() — une valeur en dehors de cet intervalle est tout simplement invalide. y1 et y2 n’ont pas de telle limite : faites glisser une poignée au-dessus du haut de la boîte ou en dessous du bas, et la courbe dépasse au-delà de son début ou de sa fin, ce qui est exactement ainsi que les effets de ressort ou de rebond sont construits à partir d’une seule courbe d’accélération.

Voir un nombre n’est pas la même chose que voir le mouvement, c’est pourquoi l’aperçu fait défiler deux billes identiques côte à côte en boucle : l’une se déplace selon votre courbe personnalisée, l’autre à une allure linéaire constante. Les regarder courir est le moyen le plus rapide de déterminer si une courbe d’accélération produit vraiment le ressenti que vous voulez, avant même qu’elle n’atteigne une feuille de style. Les pages de préréglages — les chiffres réels derrière le mot-clé ease-in-out de CSS, une approximation honnête de dépassement que certains appellent rebond, et la courbe standard publiée par Google pour Material Design — sont des points de départ prêts à l’emploi depuis lesquels vous pouvez glisser plutôt que de partir de points de contrôle vierges.

Tout s’exécute localement dans votre navigateur : pas d’envoi, pas de compte, pas d’aller-retour serveur, et le générateur continue de fonctionner hors ligne une fois la page chargée.