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
#1par Likstar, le 22 août 2013
comment fonctionne steps(nombre, start|end) svp