Un bouton qui apparaît. Un panneau qui glisse. Une notification qui se rétracte. Chaque animation que vous voyez sur le web suit une courbe — et cette courbe détermine si le mouvement semble mécanique ou vivant.
La fonction cubic-bezier() est le moteur caché derrière la quasi-totalité des transitions CSS. Pourtant, la plupart des développeurs se contentent des mots-clés par défaut — ease, ease-in, ease-out — sans jamais comprendre ce qu'ils contrôlent réellement. Le résultat : des interfaces qui bougent, mais qui ne ressentent rien.
Cet article va changer votre rapport aux animations. Nous allons décortiquer les mathématiques derrière les courbes de Bézier en termes simples, comparer chaque preset d'easing standard, explorer les effets spring et bounce, et montrer comment un easing cohérent à travers un écosystème de produits crée une véritable identité de mouvement. Le tout en s'appuyant sur notre Éditeur Cubic-Bézier gratuit et interactif.
Qu'est-ce qu'une courbe cubic-bézier ?
Les mathématiques, simplement
Une courbe de Bézier cubique est définie par quatre points : un point de départ (0, 0), un point d'arrivée (1, 1), et deux points de contrôle intermédiaires — P1 et P2. Ce sont ces deux points de contrôle que vous manipulez quand vous écrivez cubic-bezier(x1, y1, x2, y2).
Imaginez une feuille de papier. L'axe horizontal représente le temps (de 0% à 100% de la durée de l'animation). L'axe vertical représente la progression (de 0% à 100% de la valeur animée). La courbe tracée entre le point de départ et le point d'arrivée décrit comment la progression évolue dans le temps.
Si la courbe est une ligne droite diagonale, la progression est constante — c'est linear. Si la courbe monte lentement au début puis accélère, le mouvement démarre doucement et finit vite — c'est un ease-in. Si elle monte vite puis s'aplatit, le mouvement démarre fort et ralentit en fin de course — c'est un ease-out.
Les deux points de contrôle P1 et P2 agissent comme des aimants qui attirent la courbe dans leur direction, sans que la courbe ne passe nécessairement par eux. C'est ce qui rend les courbes de Bézier si expressives : quatre simples nombres produisent un espace de mouvement pratiquement infini.
Pourquoi quatre nombres suffisent
La notation CSS cubic-bezier(0.4, 0, 0.2, 1) encode les coordonnées des deux points de contrôle :
- x1 = 0.4, y1 = 0 — le premier point de contrôle tire la courbe vers la droite au début (démarrage lent)
- x2 = 0.2, y2 = 1 — le second point de contrôle tire la courbe vers le haut à la fin (arrivée rapide avec décélération)
Les coordonnées X sont toujours comprises entre 0 et 1 (elles représentent le temps et ne peuvent pas remonter). Les coordonnées Y, en revanche, peuvent dépasser ces bornes — c'est exactement ce qui permet les effets de dépassement (overshoot) et de rebond (bounce).
Les cinq easing standards décortiqués
Notre Éditeur Cubic-Bézier inclut tous les presets CSS natifs dans sa catégorie Standard. Voici ce que chacun fait réellement.
linear — cubic-bezier(0, 0, 1, 1)
Progression constante, sans accélération ni décélération. La courbe est une ligne droite. Le mouvement avance au même rythme du début à la fin.
Quand l'utiliser : les barres de progression, les indicateurs de chargement, les rotations continues (loader spinners). Partout où le mouvement doit communiquer une progression mesurable et régulière.
Quand l'éviter : pratiquement toutes les transitions d'interface utilisateur. Le mouvement linéaire paraît robotique et artificiel parce qu'aucun objet dans le monde réel ne se déplace à vitesse constante.
ease — cubic-bezier(0.25, 0.1, 0.25, 1)
C'est le défaut CSS — et il n'est pas mauvais. Il démarre lentement, accélère au milieu, puis décélère vers la fin. La décélération en fin de course est prononcée (y2 = 1), ce qui donne un sentiment de repos naturel.
Quand l'utiliser : quand vous ne savez pas quel easing choisir. C'est un choix sûr et polyvalent pour les transitions de hover, les changements d'opacité et les micro-interactions générales.
ease-in — cubic-bezier(0.42, 0, 1, 1)
L'élément démarre lentement et accélère jusqu'à la fin. La courbe est plate au début et raide à la fin.
Quand l'utiliser : les éléments qui quittent l'écran. Un panneau latéral qui se ferme, une notification qui disparaît, un élément qui s'envole. Le démarrage lent donne à l'utilisateur un instant pour percevoir le début du mouvement, puis l'accélération emporte l'élément hors de vue.
Piège courant : ne l'utilisez pas pour les éléments qui apparaissent. Un ease-in sur une entrée crée une impression de latence — l'utilisateur attend que le mouvement « décolle ».
ease-out — cubic-bezier(0, 0, 0.58, 1)
L'inverse exact : l'élément démarre vite et décélère jusqu'à l'arrêt. La courbe est raide au début et plate à la fin.
Quand l'utiliser : les éléments qui entrent dans l'écran. Une modale qui apparaît, un dropdown qui se déploie, un toast qui glisse. L'entrée rapide capte l'attention immédiatement, et la décélération crée un atterrissage doux et naturel.
C'est le pattern que nous appliquons systématiquement dans Guthly et WePlanify pour les transitions d'entrée — il communique réactivité et fluidité.
ease-in-out — cubic-bezier(0.42, 0, 0.58, 1)
Symétrique : démarrage lent, accélération au milieu, décélération à la fin. La courbe forme un S doux.
Quand l'utiliser : les éléments qui restent à l'écran mais changent de position ou d'état. Un carrousel qui pivote, un accordion qui s'ouvre, un toggle qui bascule. Le mouvement symétrique convient aux transitions où l'élément ne quitte ni n'entre dans le viewport.
Au-delà des standards : presets Material, Expressive et Dramatic
Les presets CSS natifs sont un point de départ, pas une destination. L'Éditeur Cubic-Bézier propose quatre catégories de presets qui couvrent un spectre complet de personnalités de mouvement.
Material Design
Google a codifié ses courbes d'easing dans les Material Design Guidelines, et pour cause — elles sont optimisées pour les interfaces tactiles :
- Standard
(0.4, 0, 0.2, 1)— une version améliorée dueaseCSS, avec une décélération plus prononcée. Idéal comme easing par défaut dans tout projet. - Decelerate
(0, 0, 0.2, 1)— entrée rapide, longue décélération. Parfait pour les éléments qui apparaissent. - Accelerate
(0.4, 0, 1, 1)— démarrage doux, sortie rapide. Pour les éléments qui disparaissent. - Sharp
(0.4, 0, 0.6, 1)— transition rapide et décisive, pour les changements qui doivent sembler instantanés.
Expressive : effets spring et overshoot
C'est ici que les choses deviennent intéressantes. Quand les coordonnées Y dépassent la plage 0-1, la courbe dépasse sa destination finale avant d'y revenir. Cela crée des effets qui imitent la physique réelle — ressorts, rebonds, élasticité.
- Snappy
(0.22, 1, 0.36, 1)— léger overshoot en début de course, sensation vive et percutante. - Bouncy
(0.34, 1.56, 0.64, 1)— y1 à 1.56 signifie que l'élément dépasse sa position finale avant de revenir. C'est l'easing des animations ludiques et playful. - Elastic Out
(0.68, -0.55, 0.27, 1.55)— des valeurs Y négatives et supérieures à 1 créent un mouvement qui oscille autour de sa destination, comme un ressort. - Back In / Back Out — l'élément recule légèrement avant d'avancer (Back In) ou dépasse sa cible avant de revenir (Back Out). Ces effets ajoutent de l'anticipation au mouvement.
Attention : les effets d'overshoot déplacent visuellement l'élément au-delà de sa position finale. Si l'espace est contraint (un élément dans un conteneur avec overflow: hidden), le dépassement sera tronqué. Testez toujours dans le contexte réel.
Dramatic : courbes exponentielles et circulaires
Pour les transitions qui doivent créer un impact visuel fort :
- Expo In/Out — accélération/décélération exponentielle, beaucoup plus prononcée que les standards. Le contraste entre les parties lentes et rapides est saisissant.
- Circ In/Out — courbe basée sur un arc de cercle, produisant une accélération organique.
- Quint In/Out — accélération polynomiale du cinquième degré, à mi-chemin entre Expo et les standards.
Créer une identité de mouvement
L'easing comme élément de marque
La couleur, la typographie et l'espacement sont des éléments de marque reconnus. L'easing des animations devrait l'être aussi.
Quand un utilisateur navigue entre Guthly, WePlanify, GuthSearch, Dropee et GutHub, les mêmes courbes d'easing à travers tous les produits créent un sentiment de familiarité inconscient. Les panneaux glissent de la même manière. Les boutons réagissent avec le même timing. Les transitions entre les vues suivent le même rythme. L'utilisateur ne peut pas l'exprimer, mais il le ressent — et c'est cela, une identité de mouvement.
Définir des tokens de mouvement
La solution pratique consiste à définir un ensemble restreint de tokens d'easing partagés entre tous les produits :
:root {
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-enter: cubic-bezier(0, 0, 0.2, 1);
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
--ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);
}
Quatre tokens suffisent pour couvrir la grande majorité des cas d'usage. L'Éditeur Cubic-Bézier vous permet de concevoir ces courbes visuellement, de prévisualiser leur comportement en temps réel et de copier les valeurs exactes pour les encoder dans votre configuration partagée.
Quand casser la règle
Les tokens partagés définissent le comportement par défaut. Mais certains moments méritent une attention particulière — une célébration après une action réussie, une erreur critique qui secoue un champ de formulaire, un onboarding qui guide l'utilisateur. Pour ces moments, un easing expressif (Bouncy, Elastic Out) crée un contraste intentionnel avec le mouvement standard, renforçant le moment plutôt que de fragmenter l'expérience.
Guide pratique : quel easing pour quel cas
Entrées d'éléments
Utilisez ease-out ou Decelerate. L'entrée rapide capte l'attention, la décélération pose l'élément naturellement.
.modal-enter {
animation: slide-up 300ms cubic-bezier(0, 0, 0.2, 1) forwards;
}
Sorties d'éléments
Utilisez ease-in ou Accelerate. Le démarrage lent laisse l'utilisateur enregistrer le début du mouvement, l'accélération emporte l'élément hors de vue.
.modal-exit {
animation: slide-down 250ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
Transitions d'état
Utilisez ease-in-out ou Material Standard. Le mouvement symétrique convient aux changements où l'élément reste visible mais change de propriétés.
.toggle {
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
Micro-interactions ludiques
Utilisez Bouncy ou Back Out pour les feedbacks positifs — complétion de tâche, ajout au panier, like.
.success-check {
animation: scale-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
Attention et erreurs
Utilisez Elastic Out pour les secousses d'erreur et les alertes. L'oscillation attire l'oeil sans être agressive.
.error-shake {
animation: shake 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
Durée et easing : le duo indissociable
L'easing ne fonctionne pas en isolation — il est inséparable de la durée. Un ease-out sur 300ms produit un mouvement radicalement différent du même ease-out sur 1000ms.
L'Éditeur Cubic-Bézier intègre un contrôle de durée ajustable de 100ms à 3000ms, précisément pour cette raison. Chaque modification de la courbe est prévisualisée en temps réel sur trois types d'animations : translation, scale et progression — vous voyez immédiatement comment votre easing se comporte à la durée choisie.
Règles générales :
- 100-200ms pour les micro-interactions (hover, focus, toggle)
- 200-400ms pour les transitions d'interface (modales, dropdowns, slides)
- 400-800ms pour les animations expressives (onboarding, célébrations)
- Au-delà de 800ms, l'utilisateur commence à percevoir le délai comme une lenteur
CSS et Tailwind : double export
L'outil génère simultanément du CSS natif et du Tailwind CSS. Le CSS natif utilise la propriété transition-timing-function :
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
Le Tailwind utilise la syntaxe de valeurs arbitraires pour les easings personnalisés :
<div class="transition-all duration-500 ease-[cubic-bezier(0.34,_1.56,_0.64,_1)]">
...
</div>
Les underscores remplacent les espaces dans la syntaxe Tailwind — l'outil gère cette conversion automatiquement. Copiez, collez, c'est prêt.
Comparer visuellement les presets
L'une des forces de l'Éditeur Cubic-Bézier est la navigation par catégories. Cliquez sur Standard, Material, Expressive ou Dramatic pour voir les courbes miniatures côte à côte. Sélectionner un preset charge immédiatement la courbe dans l'éditeur interactif et lance la prévisualisation d'animation.
Ce workflow de comparaison rapide est essentiel. Les différences entre ease et Material Standard sont subtiles sur le papier — (0.25, 0.1, 0.25, 1) vs (0.4, 0, 0.2, 1) — mais évidentes en mouvement. L'outil rend ces nuances tangibles.
Conclusion
Les courbes cubic-bézier ne sont pas un détail technique obscur — elles sont le langage du mouvement sur le web. Maîtriser les quatre nombres qui définissent une courbe d'easing, c'est maîtriser la façon dont votre interface communique avec ses utilisateurs.
Le mouvement linéaire est mécanique. Le ease-in convient aux sorties. Le ease-out convient aux entrées. Le ease-in-out convient aux transitions d'état. Et au-delà de ces standards, un univers de courbes expressives attend d'être exploré — effets spring, overshoot, élasticité — pour donner une personnalité à chaque interaction.
L'Éditeur Cubic-Bézier transforme ces concepts abstraits en expérimentation concrète. Chaque point de contrôle est un glisser-déposer, chaque modification est visible instantanément, chaque résultat est prêt à être copié dans votre code CSS ou Tailwind. Concevez vos courbes, définissez vos tokens de mouvement, et donnez à vos interfaces le mouvement qu'elles méritent.