Courbe d’accélération standard de Material Design
Créez une fonction de timing CSS cubic-bezier() personnalisée en déplaçant deux points de contrôle, prévisualisez-la en direct par rapport à une référence linéaire, puis copiez la valeur prête à l’emploi.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur avec x1=0.4, y1=0, x2=0.2, y2=1 déjà chargés — la courbe d’accélération standard publiée dans les recommandations de mouvement de Material Design de Google. Déplacez l’une des poignées ou modifiez les nombres, et la courbe, l’aperçu en direct et le CSS copiable se mettent à jour ensemble.
Material Design appelle cette courbe « accélération standard » et la recommande pour la plupart des transitions à l’écran — des éléments déjà visibles qui se contentent de se déplacer, de se redimensionner ou de fondre dans le même écran. Sa forme accélère rapidement, puis décélère en douceur jusqu’à sa position, raison pour laquelle tant d’applications Android et d’interfaces web de style Material partagent la même sensation de transition sans que personne ne remarque qu’elles utilisent les quatre mêmes nombres.
Insérez-la directement dans transition-timing-function ou animation-timing-function pour une cohérence avec Material, ou servez-vous-en comme point de référence : les recommandations de Material définissent également des courbes distinctes de « décélération » et d’« accélération » pour les éléments qui entrent ou quittent l’écran, que cette courbe standard unique n’est pas censée remplacer.