Easing animation : définition des courbes et exemples

Easing animation : la définition simple

Appelé aussi courbe d'accélération, l'easing fixe la vitesse d'un élément animé à chaque instant. Sans lui, l'objet file à vitesse constante du premier au dernier pixel. Avec lui, il peut démarrer doucement, prendre de l'élan, puis freiner avant de s'immobiliser.

Le terme vient de l'anglais « to ease », adoucir. Un mouvement qui démarre lentement fait un « ease in » ; celui qui ralentit à l'arrivée, un « ease out ». CSS, JavaScript et la plupart des outils de design ont repris ces mots tels quels.

Pourquoi s'en soucier ? Parce que rien, dans le monde réel, ne bouge à vitesse fixe. Une porte qui se referme, une voiture qui s'arrête, une main qui pose un objet : tout accélère, puis ralentit. Imitez ce comportement et l'interface paraît naturelle. Ignorez-le, elle devient mécanique.

À quoi sert une easing function sur un site

Sur un site d'entreprise, l'animation n'a rien d'une décoration. Elle guide le regard, confirme une action, montre d'où arrive un élément. Que ce message passe bien ou qu'il agace, c'est la courbe qui en décide.

Rendre une interface plus lisible

Un menu s'ouvre, une fenêtre apparaît : l'easing aide l'œil à suivre. Arrivé vite puis freiné, l'élément se pose clairement à sa place. Le visiteur comprend aussitôt ce qui a changé à l'écran, et c'est l'un des ressorts d'une bonne expérience UX et UI.

Donner une impression de rapidité

À durée égale, deux animations ne paraissent pas aussi rapides selon leur courbe. Celle qui démarre fort et finit en douceur semble plus vive qu'une transition linéaire. Voilà un levier concret de performance perçue : le site a l'air de répondre plus vite, sans qu'on touche au serveur.

Les principales courbes d'easing expliquées

En CSS, deux propriétés acceptent des mots-clés prêts à l'emploi : transition-timing-function, et animation-timing-function pour les keyframes. Derrière chaque mot-clé se cache une courbe de Bézier précise. Voici les cinq que vous croiserez le plus souvent.

linear : à vitesse constante

Ici, l'élément avance au même rythme du début à la fin. Départ brusque, arrêt tout aussi sec. Pour un mouvement continu (un loader qui tourne, une barre de progression), ça convient ; pour un déplacement, presque jamais.

ease : la valeur par défaut

Vous ne précisez rien ? Le navigateur applique ease. La courbe part assez vite, accélère encore, puis ralentit nettement vers la fin. Elle passe partout. C'est justement son défaut : elle n'a aucun caractère.

ease-in : démarrer lentement

L'animation part doucement et accélère jusqu'à l'arrivée, qu'elle atteint à pleine vitesse, d'où cette impression d'élan. Je la réserve aux éléments qui quittent l'écran : une notification qui s'efface, une fenêtre qu'on ferme.

ease-out : ralentir à la fin

C'est l'inverse. Démarrage rapide, puis freinage pour se poser. En entrée d'interface, c'est souvent le meilleur choix : le visiteur voit une réaction immédiate à son clic, suivie d'un atterrissage en douceur.

ease-in-out : lent au départ et à l'arrivée

Ease-in-out combine les deux : départ lent, accélération au milieu, ralentissement final. Un élément qui reste à l'écran et change de place, comme un carrousel glissant d'une image à l'autre, voilà son terrain. Sur une action courte, en revanche, elle peut sembler un peu molle.

cubic-bezier et steps : les courbes personnalisées

Quand les mots-clés ne suffisent plus, on dessine sa propre courbe avec cubic-bezier et quatre nombres. Ease-out, par exemple, correspond à cubic-bezier(0, 0, 0.58, 1). Et steps ? Elle découpe le mouvement en sauts, pratique pour une animation image par image. Des générateurs en ligne permettent de tracer la courbe puis de copier la valeur.

Comment choisir la bonne courbe

Tout dépend de ce que fait l'élément. Il entre ? Il sort ? Il se déplace ? Une règle simple couvre la plupart des cas, vous l'affinerez ensuite.

• Un élément qui apparaît (menu, fenêtre, message) : ease-out.
• Un élément qui quitte l'écran : ease-in.
• Un déplacement d'un point à un autre, l'élément restant visible : ease-in-out.
• Un mouvement continu ou une rotation sans fin : linear.
• Le survol d'un bouton, un changement de couleur : ease ou ease-out, sur une durée très courte.

La durée pèse autant que la courbe. Pour un bouton ou un menu, le repère courant tourne entre 150 et 300 millisecondes. Au-delà ? Le visiteur attend la fin de l'animation au lieu de lire votre offre. Mon conseil : si un effet vous semble lent, raccourcissez-le d'abord, et ne touchez à la courbe qu'ensuite.

L'outil compte aussi. Pour la majorité des effets, les transitions CSS suffisent ; JavaScript devient utile pour des enchaînements complexes ou des ressorts physiques. Nous détaillons ce point dans notre comparatif animation CSS ou JavaScript.

Les erreurs courantes avec l'easing

Une animation ratée manque rarement d'effets. Elle souffre plutôt de réglages mal pensés. Voici les fautes que nous relevons le plus souvent lors d'un audit de site.

• Faire entrer un élément en ease-in : il démarre lentement, et le site a l'air de traîner.
• Garder linear sur un déplacement, ce qui donne un mouvement robotique.
• Fixer des durées trop longues, qui retardent l'accès au contenu.
• Attribuer une courbe différente à chaque composant : l'ensemble perd sa cohérence.
• Animer des propriétés coûteuses comme width ou top au lieu de transform et opacity, d'où un affichage qui saccade.
• Ignorer le réglage « réduire les animations » choisi par le visiteur.

Ce dernier point relève directement de l'accessibilité. Certaines personnes ressentent des nausées face aux mouvements à l'écran. Avec la requête CSS prefers-reduced-motion, vous pouvez couper ou alléger les animations pour elles, dans le cadre d'une démarche d'accessibilité web RGAA.

Ma recommandation ? Définissez deux ou trois courbes pour tout le site, avec leurs durées, et tenez-vous-y. C'est ce que nous faisons lors d'une création de site internet : une petite charte du mouvement, aussi précise que celle des couleurs.

Questions fréquentes