Générateur CSS de courbes cubic-bezier, gratuit

Ce qu'est vraiment une fonction de minutage cubic-bézier

En CSS, une fonction de minutage mappe le temps écoulé (l'entrée, de 0 au début de l'animation à 1 à la fin) à une valeur de progression (la sortie, conventionnellement aussi de 0 à 1 mais autorisée à dépasser). La propriété animée (opacity, translate, color, tout ce que CSS peut transitionner) interpole entre sa valeur de départ et sa valeur d'arrivée au rythme que la fonction de minutage décrit. Le minutage linéaire signifie que la propriété se déplace à vitesse constante ; les diverses fonctions ease accélèrent, décélèrent ou les deux. cubic-bezier(x1, y1, x2, y2) est la forme générale : une courbe de Bézier de (0,0) à (1,1) avec deux points de contrôle libres P1 et P2 que vous spécifiez avec quatre nombres. Le navigateur échantillonne des points le long de cette courbe pour déterminer la progression de la propriété à chaque image de l'animation. Les quatre nombres définissent deux points de contrôle : P1 = (x1, y1) façonne le début de la courbe (typiquement 0–1 sur les deux axes), P2 = (x2, y2) façonne la fin. Les valeurs x doivent rester dans [0, 1] pour que la courbe soit une fonction monovaluée du temps ; les valeurs y peuvent dépasser [0, 1] pour produire des effets de dépassement et rebond (un y de 1,2 signifie que la propriété dépasse momentanément sa valeur de destination avant de se stabiliser).

Courbes de Bézier, lignée mathématique

Les courbes portent le nom de Pierre Bézier, ingénieur français chez Renault qui les a utilisées dans les années 1960 pour concevoir les lignes lisses des panneaux de carrosserie de la Renault 16, publiées en 1968 dans le cadre du système CAO UNISURF de Renault. Les mathématiques avaient été développées indépendamment quelques années plus tôt (1959) par Paul de Casteljau chez Citroën, mais Citroën a gardé le travail de de Casteljau comme secret commercial et la version publiée de Bézier est devenue la référence canonique. Les deux hommes ont convergé vers la même famille de courbes polynomiales définies par des points de contrôle, l'algorithme de de Casteljau pour évaluer une courbe de Bézier à un paramètre donné porte le nom du pionnier non publié. Les courbes de Bézier cubiques sont devenues la primitive universelle des graphiques vectoriels parce qu'elles sont peu coûteuses à évaluer (quelques multiplications et additions), trivialement scalables (les maths sont invariantes sous les transformations affines) et localement contrôlables (déplacer un point de contrôle ne change que les segments de courbe voisins). Adobe PostScript (1984) et PDF, la spécification SVG (recommandation W3C septembre 2001) et chaque format de police moderne utilisent les courbes de Bézier cubiques comme bloc de construction des lettres, icônes et illustrations. CSS a adopté le même type de courbe pour le minutage des animations, empruntant la primitive mathématique standard du monde du design visuel pour le nouveau cas d'usage de décrire le mouvement.

La spec CSS Animation et les fonctions de minutage

Les animations et transitions CSS utilisent toutes deux la même famille de fonctions de minutage. La spec CSS Animations Level 1 a été publiée pour la première fois sous forme de Working Draft public en mars 2009 (extraite des implémentations préfixées WebKit antérieures) et continue d'être maintenue par le W3C CSS Working Group. Le module CSS Easing Functions Level 1 formalise la syntaxe de la fonction de minutage et est actuellement Candidate Recommendation. Cinq mots-clés nommés sont des alias pour des cubic-beziers spécifiques : ease = cubic-bezier(0.25, 0.1, 0.25, 1): la valeur par défaut CSS pour les transitions, avec un démarrage rapide et une fin lente qui semble naturelle pour la plupart des mouvements UI. ease-in = cubic-bezier(0.42, 0, 1, 1): démarrage lent, accélère vers une fin rapide. ease-out = cubic-bezier(0, 0, 0.58, 1): démarrage rapide, décélère vers une fin lente ; c'est généralement l'easing le plus utilisé pour les éléments UI entrant dans le viewport. ease-in-out = cubic-bezier(0.42, 0, 0.58, 1): courbe en S symétrique, lente aux deux extrémités. linear = cubic-bezier(0, 0, 1, 1): pas d'easing, taux constant ; rarement le bon choix pour l'UI mais approprié pour les animations en boucle continue comme les spinners. CSS offre aussi deux options de minutage non-Bézier : steps(n, jumpterm) pour l'animation par étapes (image par image), et linear() (ajouté dans CSS Easing Level 2) pour des fonctions linéaires par morceaux qui approximent n'importe quelle courbe.

Courbes d'easing des systèmes de design

Les grands systèmes de design publient des courbes d'easing tranchées qui surchargent les valeurs CSS par défaut. Google Material Design spécifie « standard easing » comme cubic-bezier(0.4, 0, 0.2, 1): accélération rapide, décélération lente, utilisé pour la plupart des transitions UI dans Android et la bibliothèque Material du web ; « decelerated easing » cubic-bezier(0, 0, 0.2, 1) pour les éléments entrant à l'écran ; « accelerated easing » cubic-bezier(0.4, 0, 1, 1) pour les éléments quittant l'écran. Les Human Interface Guidelines d'Apple mettent l'accent sur les animations de physique de ressort plutôt que les courbes de Bézier fixes, mais l'UIKit d'iOS livre un cubic-bezier par défaut d'environ (0.25, 0.1, 0.25, 1) (le même que ease en CSS). Le Carbon Design System d'IBM utilise cubic-bezier(0.5, 0, 0.1, 1) pour sa catégorie de mouvement productif. Microsoft Fluent, Atlassian, Salesforce Lightning spécifient tous leurs propres courbes. Les équations d'easing de Robert Penner (publiées en 2001 dans le cadre de son livre sur le mouvement Flash) ont défini le vocabulaire de courbes nommées que presque toutes les bibliothèques d'animation utilisent, easeInQuad, easeOutCubic, easeInOutSine, easeInQuart, easeOutBack, easeInOutBounce, easeInElastic. La plupart peuvent être exprimées en cubic-beziers ; les variantes elastic et bounce ne le peuvent pas (elles nécessitent des fonctions par morceaux multi-parties parce qu'elles oscillent).

Choisir la bonne courbe selon l'usage

• Éléments entrant dans le viewport (modales apparaissant, cartes glissant à l'intérieur, dropdowns s'ouvrant), utilisez ease-out ou une courbe décélérée comme celle de Material cubic-bezier(0, 0, 0.2, 1). L'élément décélère à mesure qu'il arrive, ce qui donne l'impression qu'il « se pose en place ».
• Éléments quittant le viewport (modales se fermant, cartes glissant à l'extérieur), utilisez ease-in ou une courbe accélérée. L'élément accélère à mesure qu'il part, donnant l'impression qu'il s'en va avec intention.
• Animations continues (loaders, barres de progression, mouvement ambiant), utilisez linear. L'easing rend le mouvement continu saccadé ; la vitesse constante se lit comme régulière.
• États de survol et pressions de bouton: courte durée (100-150 ms) avec ease-out pour le hover-in et ease-in ou pas d'easing pour le hover-out. Le retour des boutons doit sembler vif.
• Mouvement emphatique qui a besoin de personnalité (notifications toast, indicateurs de succès), utilisez une courbe légèrement en dépassement comme cubic-bezier(0.34, 1.56, 0.64, 1) pour un rebond subtil qui signale « il vient de se passer quelque chose d'intéressant » sans être agaçant.
• Animations plus longues (au-delà de 500 ms): utilisez ease-in-out ou une courbe en S similaire. Les animations longues avec un easing unilatéral semblent avoir un début ou une fin de mauvaise forme.

Considérations de performance

Les fonctions de minutage cubic-bezier personnalisées ne coûtent essentiellement rien à l'exécution, la courbe est une constante, les navigateurs précompilent la table de lookup une fois, et l'évaluation par image est de quelques opérations en virgule flottante. La question de performance est quelle propriété vous animez, pas la courbe de minutage. Animer transform (translate, scale, rotate) et opacity utilise la composition GPU et reste fluide à 60 ou 120 fps même sur du matériel milieu de gamme. Animer top, left, width, height, margin, padding, ou toute propriété qui déclenche le layout va saccader sur tout sauf les pages les plus simples parce que chaque image déclenche un reflow complet. La liste des propriétés « compositor-friendly » (transform + opacity, plus filter et quelques autres) est l'ensemble sûr habituel ; tout le reste doit être testé sous la charge de page réelle. La propriété CSS will-change indique au navigateur qu'une propriété va s'animer, lui permettant de pré-promouvoir l'élément à sa propre couche de composition ; à utiliser avec parcimonie car chaque will-change réserve de la mémoire GPU.

Accessibilité : prefers-reduced-motion

Une minorité significative d'utilisateurs (ceux ayant des troubles vestibulaires, des conditions de déficit d'attention, ou simplement une préférence personnelle) trouvent le design de mouvement distrayant ou activement inconfortable. La spec CSS Media Queries Level 5 définit la media feature prefers-reduced-motion, exposée comme paramètre système sur macOS (Réglages Système → Accessibilité → Affichage → Réduire le mouvement), Windows 10+ (Paramètres → Options d'ergonomie → Affichage), iOS, Android et la plupart des bureaux Linux principaux. La convention depuis environ 2019 : envelopper toute animation non essentielle dans @media (prefers-reduced-motion: no-preference) { ... } ou inverser avec @media (prefers-reduced-motion: reduce) { transition: none !important; animation: none !important; }. Le choix de courbe cubic-bezier n'a pas d'importance pour ça, la spec demande au développeur de désactiver ou raccourcir substantiellement l'animation quand l'utilisateur a exprimé la préférence. La documentation moderne des systèmes de design (Material, Atlassian, GOV.UK) inclut toute des conseils sur le mouvement réduit.

Physique de ressort, l'alternative plus récente

Les fonctions de minutage cubic-bezier décrivent le mouvement comme une interpolation de durée fixe le long d'une courbe ajustée à la main. La physique de ressort décrit le mouvement comme la stabilisation naturelle d'un oscillateur harmonique amorti : vous spécifiez masse, raideur et amortissement, et l'animation tourne jusqu'à ce que le ressort soit au repos. Les ressorts semblent plus naturels pour les gestes UI interruptibles parce qu'ils ont un élan qui se prolonge à travers les interruptions, en relâchant un geste de flick en plein vol, le ressort continue jusqu'à sa destination sur une nouvelle courbe plutôt que de claquer. L'iOS d'Apple utilise la physique de ressort pour la plupart des interactions natives (le rebond d'une scroll view aux bords, l'effet de bande de caoutchouc d'un swipe). React Spring (Paul Henschel), Framer Motion et la fonction d'easing CSS linear() (quand on lui donne une courbe de ressort échantillonnée) apportent la sémantique de ressort au web. Les cubic-beziers restent le bon outil pour les transitions UI à durée fixe ; les ressorts sont le bon outil pour le mouvement piloté par geste, interruptible. Cet éditeur produit des cubic-beziers, la bonne forme pour 90 % du travail d'animation UI en 2026.

Quand vous prendrez cet outil

• Concevoir une nouvelle animation au feeling. Faites glisser les points de contrôle jusqu'à ce que la balle de prévisualisation se déplace comme vous le voulez, puis copiez le CSS. Plus rapide que de taper quatre nombres et rafraîchir la page.
• Reproduire une animation d'un autre produit. Faites de l'ingénierie inverse du minutage d'une animation que vous avez vue ailleurs en ajustant jusqu'à ce que la prévisualisation corresponde à votre souvenir.
• Construire une bibliothèque de mouvement de marque. Décidez-vous pour trois ou quatre cubic-beziers spécifiques pour « rapide », « fluide », « emphatique », « rebond » et appliquez-les de manière cohérente à travers le produit.
• Revue d'une spec d'animation d'un designer. Collez les valeurs cubic-bezier d'une spec de mouvement Figma, voyez si la courbe produit le mouvement que le designer a décrit.
• Passation ingénieur-designer. Un designer fait sortir la bonne courbe dans cet outil, copie le CSS, et le colle dans un message Slack, un signal bien plus élevé qu'un vague « rends-le plus rebondissant ».

Questions fréquentes

Que représentent les valeurs ?

Ils définissent les deux points de contrôle d'une courbe de Bézier cubique de (0,0) à (1,1). P1 = (x1, y1) façonne le début de la courbe ; P2 = (x2, y2) façonne la fin. L'axe x est le temps (doit être dans [0, 1]) ; l'axe y est la progression de l'animation (peut dépasser [0, 1] pour les effets de dépassement). y > 1 signifie que la propriété dépasse momentanément sa valeur de destination avant de se stabiliser ; y < 0 signifie que la propriété se déplace brièvement dans le mauvais sens avant de s'approcher de la cible.

Quel est l'easing CSS par défaut ?

Pour les transitions CSS (transition: opacity 300ms;) le défaut est ease, équivalent à cubic-bezier(0.25, 0.1, 0.25, 1): démarrage rapide, fin lente. Pour les animations CSS (animation: foo 1s;) le défaut est aussi ease. Surchargez avec transition-timing-function ou animation-timing-function. Pour la plupart des mouvements UI, la variante ease-out ou une courbe décélérée style Material produit des résultats au feel meilleur que le défaut.

Comment faire un effet rebondissant ou de dépassement ?

Poussez y2 au-dessus de 1 (valeurs typiques 1,2–1,6) pour que la courbe dépasse brièvement la destination avant de se stabiliser. Un rebond subtil courant est cubic-bezier(0.34, 1.56, 0.64, 1). Pour des rebonds prononcés vous voudrez de la physique de ressort ou une animation multi-keyframe plutôt qu'un seul cubic-bezier, les courbes de Bézier ne peuvent avoir qu'un seul pic, donc le vrai rebond (oscillations multiples) nécessite des keyframes à des étapes intermédiaires.

Les courbes personnalisées sont-elles plus lentes que les mots-clés nommés ?

Non, les mots-clés nommés sont des alias pour des cubic-beziers spécifiques, évalués par le même chemin de code. Les performances dépendent de la propriété que vous animez (transform/opacity = composé GPU et rapide ; les propriétés affectant le layout comme top/left/width = lentes à cause du reflow), pas de la courbe de minutage. Le coût d'évaluation cubic-bezier est négligeable.

Cet outil fonctionne-t-il hors ligne ?

Oui, le canvas de courbe, l'animation de la balle de prévisualisation et la génération de code CSS s'exécutent toutes entièrement dans votre navigateur via JavaScript. Aucun appel réseau pendant l'usage. Mettez la page hors ligne (mode avion) après son chargement et l'éditeur fonctionne toujours. Pas de télémétrie ; les valeurs de courbe sur lesquelles vous vous arrêtez ne quittent jamais votre appareil.

Outils associés