Attribut ANIMATION-TIMING-FUNCTION

Rôle

L’attribut animation-timing-function permet de spécifier la courbe de vitesse (accélération) d’une animation.

L’animation peut se faire à vitesse constante, avec accélération ou décélération. En savoir plus sur les courbe ease.

Vous pouvez même définir votre propre vitesse avec une courbe de Bezier cubique. Une courbe de Bézier cubique est caractérisée par 4 points, appelés points de contrôle. Pour en savoir plus, nous vous conseillons de lire le pdf sur les courbes de Bezier cubique.

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.animationTimingFunction

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

body{
  padding: 10px;
  background-color: rgb(230,230,230);
}
img{
  border-radius: 50%;
  width: 100px;
  position: relative;
  display: block;
  margin: 0 auto;
  border: thin solid orange;
  animation-name: cos;
  animation-duration: 1s;
  animation-timing-function:ease-in ;
  animation-direction: alternate ;
  animation-iteration-count: infinite;
}
@keyframes cos {
  0% {top: 0px}
  100% {top: 150px}
}

– Le code HTML

<img src="//lorempixel.com/output/animals-q-c-100-100-10.jpg" alt="">

Résultat

Dans cet exemple, la courbe est de type ease-in (vitesse augmente au début). Cela permet de simuler une chute. Le rebond est assuré par l’attribut animation-direction qui spécifie si l’animation doit être inversée et/ou alternée.

Compatibilité

L’attribut animation-timing-function est pris en charge par tous les principaux navigateurs.
A partir d’Internet Explorer 10
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -webkit-(Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opéra)

Valeurs

Les différentes valeurs de l’attribut animation-timing-function sont:

ease

Démarrage lent, puis rapide, puis ralentissement (Bézier (0.25,0.1,0.25,1)) : valeur par défaut.

Courbe :

Syntaxe :
animation-timing-function : ease

linear

Vitesse constante.

Courbe :

Syntaxe :
animation-timing-function : linear

ease-in

Démarrage lent (Bézier (0.42,0,1,1)).

Courbe :

Syntaxe :
animation-timing-function : ease-in

ease-out

Ralentissement à la fin (Bézier (0,0,0.58,1)).

Courbe :

Syntaxe :
animation-timing-function : ease-out

ease-in-out

Démarrage lent et ralentissement à la fin (Bézier (0.42,0,0.58,1) )).

Courbe :

Syntaxe :
animation-timing-function : ease-in-out

cubic-bezier(n,n,n,n)

Vos propres valeurs dans la fonction cubique – Bézier. Les valeurs possibles sont des valeurs numériques 0-1
Syntaxe :
animation-timing-function : cubic-bezier(0.42,0,1,1)

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
animation-timing-function : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
animation-timing-function : inherit

A voir aussi

animation– animation-delay– animation-direction– animation-duration