Propriété CSS animation-timing-function
La propriété animation-timing-function définit comment l'animation progresse sur la durée de chaque cycle, et non sur toute la durée de l'animation. Elle spécifie la courbe de vitesse de l'animation, définissant le temps nécessaire pour qu'une animation passe d'un ensemble de styles à un autre.
Les fonctions de timing définissent l'interpolation entre les étapes des images clés. Si aucune fonction de timing n'est spécifiée pour un intervalle, la valeur animation-timing-function de l'élément est utilisée.
La propriété animation-timing-function est l'une des propriétés CSS3.
Elle peut prendre les valeurs suivantes :
ease- (par défaut) Commence lentement, puis s'accélère, et se termine lentement.ease-in- Commence lentement, mais s'accélère à la fin.ease-out- Commence rapidement, mais ralentit à la fin.ease-in-out- Commence lentement et se termine lentement.step-start- Équivalent àsteps(1, start).step-end- Équivalent àsteps(1, end).linear- L'animation a la même vitesse tout au long de celle-ci, souvent idéale pour les changements de couleur ou d'opacité.steps(int, start|end)- Spécifie une fonction par paliers avec deux paramètres. Le premier paramètre définit le nombre d'intervalles dans la fonction. Il doit être supérieur à 0. Le deuxième paramètre est soit la valeur "start" soit "end", et spécifie le point auquel le changement de valeurs se produit dans l'intervalle. Si le deuxième paramètre est omis, "end" est utilisé.cubic-bezier(n,n,n,n)- Spécifie des valeurs personnalisées pour la fonction cubic-bezier. Les deux premiers paramètres définissent les coordonnées X et doivent être compris entre 0 et 1. Les deux derniers paramètres définissent les coordonnées Y et peuvent être n'importe quel nombre.
Lorsque plusieurs valeurs séparées par des virgules sont spécifiées, elles correspondent aux animations définies dans animation-name dans l'ordre. S'il y a moins de fonctions de timing que d'animations, la liste est répétée pour correspondre au nombre.
| Valeur initiale | ease |
|---|---|
| S'applique à | Tous les éléments. S'applique également aux pseudo-éléments ::before et ::after. |
| Héritée | Non |
| Animable | Non |
| Version | CSS3 |
| Syntaxe DOM | object.style.animationTimingFunction = "linear"; |
Syntaxe
Syntaxe de la propriété CSS animation-timing-function
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;Exemple de la propriété animation-timing-function avec la valeur "ease" :
Exemple de la propriété CSS animation-timing-function avec la valeur ease
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
position: relative;
animation: element 5s infinite;
animation-timing-function: ease;
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div></div>
</body>
</html>Exemple de la propriété animation-timing-function avec la valeur "ease-in" :
Exemple de la propriété CSS animation-timing-function avec la valeur ease-in
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #8ebf42;
position: relative;
animation: element 7s infinite;
animation-timing-function: ease-in;
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h1>The animation-timing-function Property</h1>
<div></div>
</body>
</html>Exemple de la propriété animation-timing-function avec différentes fonctions de timing :
Exemple de la propriété CSS animation-timing-function avec les valeurs linear, ease, ease-in, ease-out et ease-in-out
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
color: #eee;
font-weight: bold;
position: relative;
text-align: center;
padding: 8px;
animation: mymove 5s infinite;
}
#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;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>Valeurs
| Valeur | Description | Lire » |
|---|---|---|
| ease | L'animation commence lentement, puis s'accélère et se termine lentement. C'est la valeur par défaut. | Lire » |
| linear | Se déroule à vitesse constante tout au long de l'animation. | Lire » |
| ease-in | L'animation commence lentement, mais s'accélère à la fin. | Lire » |
| ease-out | L'animation commence rapidement, mais ralentit à la fin. | Lire » |
| ease-in-out | L'animation commence lentement et se termine lentement. | Lire » |
| step-start | Équivalent à steps(1, start). | |
| step-end | Équivalent à steps(1, end). | |
| steps(int,start|end) | Spécifie une fonction par paliers avec deux paramètres. Le premier paramètre spécifie le nombre d'intervalles dans la fonction. Il doit être supérieur à 0. Le deuxième paramètre est soit la valeur "start" soit "end", et spécifie le point auquel le changement de valeurs se produit dans l'intervalle. Si le deuxième paramètre n'est pas spécifié, la valeur "end" est utilisée. | |
| cubic-bezier (n,n,n,n) | Définit les valeurs par la fonction cubic-bezier. Les deux premiers paramètres sont les coordonnées X (0 à 1), et les deux derniers sont les coordonnées Y (peuvent être n'importe quel nombre). | |
| initial | Définit la valeur par défaut de la propriété. | |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que spécifie la propriété CSS animation-timing-function ?