Qu'est-ce que cubic-bezier et pourquoi « ease » ne suffit pas ?
Chaque animation CSS a une timing function (la courbe d'accélération). `ease`, `linear`, `ease-in-out` sont des presets, mais en UI moderne, les animations doivent sembler naturelles (comme dans le monde réel) : l'élément accélère, décélère, parfois dépasse un peu.
cubic-bezier(x1, y1, x2, y2) vous donne un contrôle total sur la courbe. Quatre nombres, et l'animation se comporte exactement comme vous voulez : démarrage lent avec une fin punchy, l'inverse, ou un petit « back » (dépassement puis retour, comme un élastique).
Vous avez ici un graphique interactif. Faites glisser deux points de contrôle colorés pour modifier la courbe. En dessous, une balle d'animation montre votre courbe en mouvement. Des valeurs Y hors 0-1 créent des effets bounce / back.
Mode d'emploi
- Choisissez un preset dans la colonne de droite (linear, ease-in, ease-out, bounce, back). Chacun est une courbe classique.
- Faites glisser le point bleu ou violet sur le graphique pour remodeler la courbe.
- En dessous, observez la balle d'animation qui utilise votre courbe. Bouton « rejouer » si elle est terminée.
- Le curseur durée (100-3000 ms) montre l'effet de la courbe à différentes vitesses.
- Copiez l'appel cubic-bezier(...) et collez-le dans `transition-timing-function` ou `animation-timing-function`.
Quand ça aide
Une courbe de Bézier, c'est la différence entre une UI bon marché et une UI premium. Exemple : hover de carte avec `transition: transform 200ms linear` vs `200ms cubic-bezier(0.4, 0, 0.2, 1)` (easing standard Material). Le jour et la nuit :
- Apparition douce de modale avec `ease-out-cubic`. Démarrage rapide, atterrissage souple = mouvement naturel.
- Carte qui revient après hover avec `ease-in-cubic`. Démarrage lent, fin rapide = effet de gravité.
- Reveal rebondissant avec `ease-out-back` (y2 supérieur à 1). L'élément entre, dépasse légèrement, se stabilise. Attention sans agacement.
- Spring façon iOS est un back/élastique plus marqué. Souvent plus simple avec Framer Motion (physique de spring vs bezier).
- Material Design utilise `cubic-bezier(0.4, 0, 0.2, 1)` (standard ease) pour la plupart des composants. Apple HIG a ses propres valeurs, similaires.
- Smooth scrolling (par exemple liens d'ancre) : `ease-in-out` donne une transition posée, perceptible sans être lente.
Après avoir choisi une courbe, utilisez-la dans `transition`, `animation` (avec @keyframes) et Framer Motion (`ease: [0.4, 0, 0.2, 1]`). Pour éditer des animations @keyframes, voir le générateur d'animations CSS.