Deux animations qui déplacent un élément sur exactement la même distance, pendant exactement la même durée, peuvent pourtant donner une impression totalement différente : l'une paraît mécanique et artificielle, l'autre semble naturelle, presque physique. Cette différence tient entièrement à la timing-function, la courbe qui règle la vitesse de l'animation à chaque instant.
Que ce soit sur une transition ou une Animation CSS, la timing-function répond toujours à la même question : l'élément doit-il se déplacer à vitesse constante, démarrer lentement puis accélérer, ou l'inverse ?
Définition
La timing-function, souvent appelée courbe d'accélération ou easing, définit comment la vitesse d'une animation évolue entre son début et sa fin. Elle se règle avec des mots-clés prédéfinis, comme linear ou ease, ou avec la fonction cubic-bezier(), qui permet de dessiner une courbe entièrement personnalisée.
| Mot-clé | Comportement |
|---|---|
linear | Vitesse constante du début à la fin |
ease | Démarrage rapide, ralentissement en fin de course |
ease-in | Démarrage lent, accélération progressive |
ease-out | Démarrage rapide, arrivée en douceur |
ease-in-out | Lent au début et à la fin, rapide au milieu |
Pourquoi linear paraît mécanique
linear déplace un élément à vitesse rigoureusement constante, sans la moindre variation. Ce comportement se rapproche de très peu de mouvements réels : dans la nature, presque tout ce qui bouge accélère au départ et ralentit à l'arrivée, ne serait-ce qu'à cause de l'inertie. Un mouvement en linear, même parfaitement fluide techniquement, donne donc immédiatement une impression de robot ou d'engrenage plutôt que de geste naturel.
.spinner {
animation: rotation 1s linear infinite;
}
.notification {
transform: translateY(0);
transition: transform 0.3s ease-out;
}ease-out pour une apparition, ease-in pour une disparition
Le choix de la courbe suit une logique simple, ancrée dans la perception humaine du mouvement. Pour un élément qui apparaît ou qui arrive à destination, ease-out donne l'impression la plus naturelle : il démarre vite puis ralentit doucement en approchant de sa position finale, comme un objet qui se pose. À l'inverse, pour un élément qui disparaît ou qui part, ease-in, qui démarre lentement puis accélère, colle mieux à l'intuition.
ease-out reste le choix par défaut le plus sûr pour la grande majorité des interactions d'interface, comme un menu qui se déploie ou une carte qui grossit au survol : le résultat paraît naturel presque à chaque fois, sans réglage supplémentaire.Dessiner une courbe personnalisée avec cubic-bezier()
Quand les cinq mots-clés prédéfinis ne suffisent pas, cubic-bezier() accepte quatre nombres qui définissent une courbe de Bézier cubique, une courbe mathématique aussi utilisée dans les logiciels de dessin vectoriel. Certains transform spectaculaires, comme un rebond léger en fin de course, ne sont possibles qu'avec une courbe personnalisée de ce type, parfois même avec des valeurs qui dépassent temporairement 100% pour simuler un léger dépassement avant le repos final.
La plupart des outils de développement intégrés aux navigateurs proposent d'ailleurs un éditeur visuel de courbe, avec une prévisualisation en direct, bien plus simple à régler que de deviner les quatre chiffres à la main.
Questions fréquentes
cubic-bezier() seule ne peut pas reproduire un rebond avec plusieurs oscillations, car elle décrit une seule courbe continue sans changement de sens. Un effet de rebond réaliste nécessite plusieurs étapes dans une règle @keyframes, chacune avec sa propre timing-function, ou une bibliothèque JavaScript dédiée à la physique du mouvement.
Non, la timing-function ne change jamais la durée totale, réglée séparément par transition-duration ou animation-duration. Elle modifie uniquement la répartition de la vitesse à l'intérieur de cette durée fixe, pas sa longueur globale.
Parce que des mouvements rapides ou des courbes trop marquées peuvent provoquer un inconfort réel, voire des nausées, chez des utilisateurs sensibles au mouvement. Un site bien conçu détecte cette préférence via une media query dédiée et réduit alors fortement, voire supprime, les animations concernées.