Générateur de courbes cubic-bezier

La courbe d'accélération (timing function) détermine comment une transition ou une animation CSS progresse dans le temps. Faites glisser les deux points de contrôle, testez le résultat dans l'animation d'exemple et copiez la valeur cubic-bezier().

Qu'est-ce que cubic-bezier() ?

Les propriétés transition-timing-function et animation-timing-function (ou la troisième valeur de transition) indiquent comment le changement se répartit sur la durée. cubic-bezier(x1, y1, x2, y2) définit une courbe de Bézier cubique qui commence en (0, 0) et se termine en (1, 1) avec deux points de contrôle : l'axe X est le temps et l'axe Y la progression.

Les mots-clés CSS sont des courbes prédéfinies : ease équivaut à 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). Les courbes easeIn…/easeOut… sont les équations classiques de Robert Penner, très utilisées dans les bibliothèques d'animation.

Conseils

Les valeurs X doivent être comprises entre 0 et 1, mais les valeurs Y peuvent en sortir : en dessous de 0 ou au-dessus de 1, l'animation « dépasse » puis revient, un léger effet de rebond comme celui d'easeOutBack. Pour les éléments qui apparaissent à l'écran, les courbes de sortie (ease-out), rapides au début et lentes à la fin, fonctionnent généralement mieux ; pour ceux qui disparaissent, les courbes d'entrée (ease-in).

Les durées de 150 à 400 ms sont les plus courantes dans les interfaces. Pensez à respecter la préférence prefers-reduced-motion des personnes qui souhaitent moins d'animations.