Générateur de courbe cubic-bezier

Qu’est-ce qu’une courbe cubic-bezier ?

Les animations et transitions CSS ont besoin d’une règle répartissant la progression dans le temps. `linear` la répartit uniformément ; tout ce qui est plus intéressant est une courbe. `cubic-bezier(x1, y1, x2, y2)` vous laisse la tracer vous-même en plaçant deux points de contrôle entre un début fixe en (0, 0) et une fin fixe en (1, 1).

La spécification CSS Easing est précise sur le sens des axes : les valeurs de progression d’entrée sont les x de la courbe, et les y sont les valeurs de progression de sortie. Autrement dit, x est la part écoulée de la durée et y la part accomplie du mouvement. Une courbe qui monte vite au départ puis s’aplatit décrit une chose qui démarre fort et glisse jusqu’à l’arrêt.

Les quatre mots-clés familiers ne sont que des courbes nommées. `ease` vaut cubic-bezier(0,25, 0,1, 0,25, 1), `ease-in` (0,42, 0, 1, 1), `ease-out` (0, 0, 0,58, 1) et `ease-in-out` (0,42, 0, 0,58, 1). Toute courbe que vous tracez ici est aussi légitime que celles-là.

Comment utiliser le générateur

1. Faites glisser l’une ou l’autre poignée. La courbe se retrace à mesure et le CSS suit. Les poignées prennent le focus : les flèches les déplacent de 0,01 et Maj-flèche de 0,1, si vous préférez la précision à la rapidité.
2. Essayez un préréglage, ou sortez du cadre. Les cinq mots-clés CSS sont à un clic. Les deux préréglages à dépassement tirent volontairement la courbe hors du carré 0–1, ce qui est licite et c’est ce qui fait qu’un mouvement dépasse sa cible puis revient s’y poser.
3. Lancez, puis copiez. L’aperçu s’anime avec le CSS réel : c’est donc le navigateur qui calcule l’accélération et vous regardez la vraie chose, non une réimplémentation. « Copier » vous donne la déclaration transition-timing-function complète.

Le bug dont cette page parle vraiment

Une courbe de Bézier cubique est paramétrique. x et y sont tous deux fonctions d’un paramètre caché — appelons-le s — qui va de 0 à 1 et n’est ni le temps ni la progression. Évaluer l’accélération à l’instant t demande donc deux étapes : résoudre x(s) = t pour trouver s, puis renvoyer y(s).

Sauter cette résolution et injecter le temps directement comme paramètre est la façon la plus répandue dont le code d’accélération écrit à la main se trompe, et l’erreur n’a rien de subtil. Sur `ease`, la valeur par défaut du navigateur, le raccourci se trompe de 28,74 % de toute l’amplitude de l’animation, au pire à 40 % du parcours. Sur `ease-in` et `ease-out`, c’est 22,96 %.

Il y a aussi un piège au moment de vérifier son propre code. `ease-in-out` est quasi symétrique : l’erreur se compense en grande partie et retombe à 2,86 %, assez peu pour passer pour un écart d’arrondi. Et cubic-bezier(0, 0, 1, 1) est pire encore : elle donne une droite parfaite, elle a donc l’air du cas sûr pour tester, et le raccourci s’y trompe encore de 9,62 %, parce que x(s) y vaut 3s² − 2s³ et non s.

En réalité le raccourci n’est exact que pour une seule famille de courbes : x1 = 1/3 et x2 = 2/3. Ce sont les seuls points de contrôle qui font de x(s) l’identité, et donc les seuls où le paramètre est véritablement le temps. Toute autre courbe exige la résolution.

Le panneau sous l’éditeur mesure cela pour la courbe que vous avez composée, car l’ampleur de l’erreur dépend entièrement de la courbe.

Limites assumées

Les x sont bornés à 0–1 et les y ne le sont pas ; c’est la règle de la spécification et non un choix fait ici : la grammaire est cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>). Cette asymétrie n’a rien d’arbitraire. Avec les deux contrôles de x dans l’intervalle unité, x(s) est croissante, si bien que chaque instant correspond à un point et un seul de la courbe — vérifié sur 200 000 paires aléatoires sans le moindre contre-exemple. Sortez un x de l’intervalle et la garantie tombe, ce qui est précisément pourquoi CSS le refuse. Laisser y libre ne coûte rien et offre le dépassement.

Le dépassement est réel et mérite d’être vu : le préréglage back-out atteint une progression de sortie de 1,0869 avant de se stabiliser, et back-in descend d’abord à −0,0969. Ces deux préréglages sont des conventions très répandues, non des éléments de CSS, et la page les signale comme telles.

Le solveur est un Newton-Raphson avec repli par dichotomie, ce qu’emploient les moteurs des navigateurs eux-mêmes. Il est vérifié par substitution et non face à une seconde implémentation : le paramètre renvoyé est repassé dans x et doit reproduire le temps à mieux qu’une partie par million, sur 40 000 courbes aléatoires et sur les courbes à extrémités plates où Newton cale et où la dichotomie doit prendre le relais.

Cet éditeur ne couvre que cubic-bezier. CSS propose aussi `linear()` avec des arrêts arbitraires et la famille `steps()`, dont aucune n’est une Bézier : elles demandent un autre éditeur et ne sont pas approximées ici en douce.

48 assertions couvrent les valeurs des mots-clés, le solveur, la garantie de monotonie et son contre-exemple, les chiffres d’erreur publiés et le formatage.

Pourquoi est-ce gratuit ?

C’est une courbe, un solveur et une zone de texte, le tout exécuté dans votre navigateur. Rien n’est envoyé, il n’y a pas de compte, et l’aperçu utilise l’animation propre du navigateur plutôt que quoi que ce soit servi d’ici.

Le panneau de mesure n’est pas non plus une option payante : c’est la raison d’être de la page.