Propriété animation-timing-function CSS

Définition et utilisation

animation-timing-function Définir la courbe de vitesse de l'animation.

Les courbes de vitesse définissent le temps utilisé pour passer d'un ensemble de styles CSS à un autre.

Les courbes de vitesse sont utilisées pour rendre les changements plus doux.

Voir également :

Tutoriel CSS3 :animation CSS

Guide HTML DOM :Attribut animationTimingFunction

Exemple

Exemple 1

Lancer l'animation à la même vitesse de début à la fin :

div
{
animation-timing-function:2s;
}

Essayer personnellement

Exemple 2

Pour mieux comprendre les différentes valeurs des fonctions de temps, voici cinq éléments div avec cinq valeurs différentes :

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Essayer personnellement

Exemple 3

Comme dans l'exemple précédent, mais la courbe de vitesse est définie par la fonction cubic-bezier :

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Essayer personnellement

Syntaxe CSS

animation-timing-function: value;

L'attribut animation-timing-function utilise une fonction mathématique appelée fonction cubique (cubic-bezier) pour générer une courbe de vitesse. Vous pouvez utiliser vos propres valeurs dans cette fonction ou des valeurs prédéfinies :

Valeur Description Test
linear La vitesse de l'animation est la même de début à fin. Test
lisse Par défaut. L'animation commence lentement, s'accélère puis ralentit avant de se terminer. Test
ease-in L'animation commence lentement. Test
ease-out L'animation se termine lentement. Test
ease-in-out L'animation commence et se termine lentement. Test
cubic-bezier(n,n,n,n) Valeurs propres dans la fonction cubic-bezier. Les valeurs possibles sont des nombres de 0 à 1.

Astuce :Essayez d'utiliser différentes valeurs dans la fonctionnalité "Essayer personnellement" ci-dessous.

Détails techniques

Valeur par défaut : lisse
Héritabilité : non
Version : CSS3
Syntaxe JavaScript : object.style.animationTimingFunction="linear"

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété complètement.

Les nombres précédés de -webkit-、-moz- ou -o- représentent la première version utilisant les préfixes.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-