Générateur de courbe d'easing CSS
Construisez des courbes <code>cubic-bezier</code> à la souris, voyez l'animation en direct, copiez le CSS.
Qu'est-ce qu'une courbe cubic-bezier ?
Une courbe cubic-bezier est une courbe paramétrique définie par quatre points : un début (toujours 0,0), une fin (toujours 1,1) et deux poignées de contrôle dont vous choisissez les coordonnées. Le CSS, les bibliothèques d'animation JavaScript et la plupart des outils de design utilisent cette courbe pour mapper la progression de l'animation (0 → 1) sur la progression de la valeur (0 → 1) — quand la courbe passe sous la diagonale, l'animation traîne puis rattrape ; au-dessus, elle bondit puis se stabilise. Les quatre nombres cubic-bezier(x1, y1, x2, y2) sont simplement les coordonnées des deux poignées.
Comment utiliser ce visualiseur
Faites glisser les deux poignées colorées dans le SVG pour façonner la courbe, ou saisissez directement les quatre valeurs. Choisissez parmi plus de 30 préréglages nommés — des classiques comme easeOutCubic, l'ensemble complet de Robert Penner, plus les courbes modernes des kits d'interface (Material, swift-out d'Apple). L'aperçu en direct anime une forme de référence avec votre courbe actuelle pour que vous ressentiez le timing, et pas seulement voir la forme. Le panneau de sortie produit le même easing en trois variantes : CSS pur cubic-bezier(), GSAP CustomEase et tuple Framer Motion — copiez celle qui correspond à votre stack.
Choisir la bonne courbe
Utilisez les courbes ease-out (poignées basses puis hautes) pour les entrées — le contenu arrive vite puis se stabilise, ce qui semble réactif. Utilisez ease-in pour les sorties — l'œil n'a pas besoin de suivre de près le contenu qui s'en va. Utilisez ease-in-out pour les déplacements à l'écran, comme une carte qui glisse d'un emplacement à un autre. Les courbes back / overshoot (où y2 > 1) ajoutent du caractère aux moments ludiques mais paraissent puériles sur une interface financière ou de productivité. Linear est rarement le bon choix pour une animation d'interface — elle paraît mécanique aux humains même si elle est mathématiquement uniforme.
Questions fréquentes
Pourquoi les valeurs y sortent-elles parfois de l'intervalle 0–1 ?
x1 et x2 sont contraints entre 0 et 1 par la spécification (les points de contrôle ne peuvent pas sortir des extrémités de la timeline), mais y1 et y2 peuvent descendre sous 0 ou monter au-dessus de 1. C'est ainsi que fonctionnent les easings « back » — la valeur dépasse brièvement sa cible avant de se stabiliser, comme un ressort qui rebondit en place.Pourquoi la courbe Material correspond-elle à un jeu de valeurs et Material 3 à un autre ?
(0.4, 0, 0.2, 1) a été livrée avec Material 1 en 2014. Material 3 (2021) a introduit une famille différente basée sur un système de ressort personnalisé qui ne se réduit pas à une seule cubic-bezier — ce que vous voyez ici est l'approximation classique la plus proche. Pour un timing Material 3 exact, utilisez les tokens officiels de Google.Faut-il utiliser cubic-bezier ou la physique des ressorts ?
Puis-je animer ceci en CSS sans JavaScript ?
transition-timing-function et animation-timing-function, qui s'exécutent toutes deux sur le thread compositeur du navigateur sans une seule ligne de JS. Les sorties pour les bibliothèques ne sont utiles que si vous animez déjà avec cette bibliothèque — déposez la cubic-bezier dans le champ ease.Quelle est la bonne durée ?
Ces courbes fonctionnent-elles dans les WebViews mobiles ?
cubic-bezier() est dans la spécification CSS depuis CSS3 et a été livrée dans tous les navigateurs mobiles dès 2013. Les types d'animation que vous voyez ici (transform translate / rotate / scale) sont également composés par le GPU partout, donc l'aperçu est représentatif des performances en production.