Propriété CSS transition-timing-function
La propriété CSS transition-timing-function spécifie la courbe de vitesse d'une transition sur toute sa durée.
La propriété transition-timing-function fait partie des propriétés CSS3.
Elle prend les valeurs suivantes :
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- step-start
- step-end
| Valeur initiale | ease |
|---|---|
| S'applique à | Tous les éléments, ainsi que les pseudo-éléments ::before et ::after. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.transitionTimingFunction = "ease"; |
Syntaxe
Valeurs CSS transition-timing-function
css
transition-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 transition-timing-function :
Exemple de code CSS transition-timing-function
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
padding: 2em;
width: 40px;
height: 40px;
left: 0;
background-color: #666;
position: relative;
transition-property: background-color, left;
transition-duration: 1s, 1s;
transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
/* first value corresponds to the first transition-property value, and the second value corresponds to the second */
}
.example:hover .box {
left: 450px;
background-color: #ccc;
}
</style>
</head>
<body>
<h2>Transition-timing-function property example</h2>
<p>Hover over the element to see the effect</p>
<div class="example">
<div class="box"></div>
</div>
</body>
</html>Exemple de transition-timing-function avec les valeurs "ease", "linear", "ease-in" et "ease-out" :
Exemple de code des valeurs CSS transition-timing-function
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
padding: 2em;
width: 30px;
height: 30px;
left: 0;
background-color: #666;
border-radius: 50%;
position: relative;
transition-property: background-color, left;
transition-duration: 1s, 1s;
}
.container:hover .example {
left: 250px;
background-color: #ccc;
}
.el1 {
transition-timing-function: ease;
}
.el2 {
transition-timing-function: linear;
}
.el3 {
transition-timing-function: ease-in;
}
.el4 {
transition-timing-function: ease-out;
}
</style>
</head>
<body>
<h2>Transition-timing-function property example</h2>
<div class="container">
<p>
<code>transition-timing-function: ease;</code>
</p>
<div class="example el1"></div>
<p>
<code>transition-timing-function: linear;</code>
</p>
<div class="example el2"></div>
<p>
<code>transition-timing-function: ease-in;</code>
</p>
<div class="example el3"></div>
<p>
<code>transition-timing-function: ease-out;</code>
</p>
<div class="example el4"></div>
</div>
</body>
</html>Exemple de transition-timing-function avec les valeurs "step-start" et "step-end" :
Autre exemple CSS transition-timing-function
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
padding: 2em;
width: 30px;
height: 30px;
left: 0;
background-color: #666;
border-radius: 50%;
position: relative;
transition-property: background-color, left;
transition-duration: 1s, 1s;
}
.container:hover .example {
left: 250px;
background-color: #ccc;
}
.el1 {
transition-timing-function: step-start;
}
.el2 {
transition-timing-function: step-end;
}
</style>
</head>
<body>
<h2> Transition-timing-function property example</h2>
<div class="container">
<p>
<code>transition-timing-function: step-start;</code>
</p>
<div class="example el1"></div>
<p>
<code>transition-timing-function: step-end;</code>
</p>
<div class="example el2"></div>
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| ease | L'effet de transition commence lentement, puis s'accélère avant de ralentir à la fin. C'est la valeur par défaut. |
| linear | L'effet de transition se déroule à vitesse constante du début à la fin. |
| ease-in | L'effet de transition commence lentement et s'accélère vers la fin. |
| ease-out | L'effet de transition commence rapidement, puis ralentit à la fin. |
| ease-in-out | L'effet de transition commence lentement et se termine lentement. |
| step-start | Équivalent à steps(1, start). |
| step-end | Équivalent à steps(1, end). |
| steps(int,start|end) | Spécifie une fonction en 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) | Spécifie une courbe de Bézier cubique pour définir l'accélération et la décélération de la transition. |
| initial | Définit la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
La propriété CSS transition-timing-function prend les valeurs suivantes, sauf