La propriété transition-timing-function précise la méthode d’accélération entre l’état initial et final d’une transition. Celle-ci peut être une accélération ou au contraire une décélération.

Les mots-clés suivants sont disponibles :

• ease : action par défaut. Accélération naturelle. Le départ est rapide, l’arrivée lente.
• linear : aucune accélération, ni décélération.
• ease-in : départ lent. L’arrivée parait donc plus rapide.
• ease-out : arrivée lente. Le départ parait donc plus rapide.
• ease-in-out : départ lent, arrivée lente. Une accélération se fait sentir au milieu de l’animation.
• cubic-bezier( p1, p2, p3, p4) : création d’une courbe d’accélération personnalisée (grâce aux courbes de bézier).
• steps( nombre, start|end) : Progression par palier (animation image par image)

Voir les Transitions CSS