Blog iamvdo.meLa 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