La propriété animation-timing-function
précise la méthode d’accélération entre l’état initial et final de chaque étape d’une animation. 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)
div{
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
Voir les Animations CSS