<easing-function>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since juillet 2015.
* Some parts of this feature may have varying levels of support.
Le type de donnée CSS <easing-function>
représente une fonction mathématique décrivant la vitesse à laquelle la valeur change.
Cette transition entre deux valeurs peut être appliquée dans différentes situations. Elle peut être utilisée pour décrire la rapidité selon laquelle les valeurs évoluent durant les animations. Elle permet ainsi de faire varier la vitesse de l'animation au fur et à mesure de sa progression. On peut utiliser une fonction d'évolution pour les transitions et animations CSS.
Syntaxe
/* Fonction d'évolution linéaire par mot-clé */
linear /* linear(0, 1) */
/* Fonctions d'évolution linéaire personnalisées */
linear(0, 0.25, 1)
linear(0, 0.25 75%, 1)
/* Fonctions d'évolution cubique de Bézier par mot-clé */
ease /* cubic-bezier(0.25, 0.1, 0.25, 1) */
ease-in /* cubic-bezier(0.42, 0, 1, 1) */
ease-out /* cubic-bezier(0, 0, 0.58, 1) */
ease-in-out /* cubic-bezier(0.42, 0, 0.58, 1) */
/* Fonction d'évolution cubique de Bézier personnalisée */
cubic-bezier(0.25, 0.1, 0.25, 1)
/* Fonctions d'évolution en escalier par mot-clé */
step-start /* steps(1, jump-start) */
step-end /* steps(1, jump-end) */
/* Fonctions d'évolution en escalier personnalisées */
steps(4, end)
steps(10, jump-both)
Valeurs
Une <easing-function>
peut être l'un des types suivants :
<linear-easing-function>
-
Crée des transitions qui progressent à un rythme constant. Cette fonction peut être définie de l'une des façons suivantes :
linear
-
Indique une interpolation à vitesse constante, sans accélération ni décélération pendant toute la durée. Ce mot-clé est équivalent à
linear(0, 1)
. Il peut aussi être représenté parcubic-bezier(0, 0, 1, 1)
.Note : Le mot-clé
linear
est toujours interprété commelinear(0, 1)
, tandis que la fonctionlinear(0, 1)
est interprétée commelinear(0 0%, 1 100%)
. linear()
-
Définit plusieurs points de progression à l'aide de valeurs
<number>
, avec des valeurs<percentage>
optionnelles pour contrôler leur position dans le temps.
<cubic-bezier-easing-function>
-
Crée des transitions progressives avec des vitesses variables. Cette fonction peut être spécifiée de l'une des façons suivantes :
ease
-
Représente la fonction d'évolution
cubic-bezier(0.25, 0.1, 0.25, 1)
. L'interpolation commence lentement, accélère fortement, puis ralentit progressivement vers la fin. Elle est similaire au mot-cléease-in-out
, mais accélère plus fortement au début. ease-in
-
Représente la fonction d'évolution
cubic-bezier(0.42, 0, 1, 1)
. L'interpolation commence lentement, puis accélère progressivement jusqu'à la fin, où elle s'arrête brutalement. ease-out
-
Représente la fonction d'évolution
cubic-bezier(0, 0, 0.58, 1)
. L'interpolation commence brutalement, puis ralentit progressivement jusqu'à la fin. ease-in-out
-
Représente la fonction d'évolution
cubic-bezier(0.42, 0, 0.58, 1)
. L'interpolation commence lentement, accélère, puis ralentit à nouveau vers la fin. Au début, le comportement est similaire àease-in
et à la fin, àease-out
. cubic-bezier()
-
Définit une courbe personnalisée à l'aide de quatre valeurs
<number>
qui spécifient les coordonnées de deux points de contrôle. Les abscisses doivent être comprises dans l'intervalle[0, 1]
.
<step-easing-function>
-
Crée des transitions en escalier qui divisent l'animation en un nombre d'intervalles de même longueur, provoquant un saut d'un palier à l'autre au lieu d'une transition progressive. Cette fonction peut être spécifiée de l'une des façons suivantes :
step-start
-
Représente la fonction d'évolution
steps(1, jump-start)
ousteps(1, start)
. L'interpolation saute immédiatement à l'état final et y reste jusqu'à la fin. step-end
-
Représente la fonction d'évolution
steps(1, jump-end)
ousteps(1, end)
. L'interpolation reste dans l'état initial jusqu'à la fin, où elle passe directement à l'état final. steps()
-
Crée une courbe en escalier à l'aide d'un
<integer>
pour spécifier le nombre d'intervalles et d'un mot-clé optionnel pour contrôler le moment des sauts.
Syntaxe formelle
<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<linear-easing-function> =
linear |
<linear()>
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
<cubic-bezier()>
<step-easing-function> =
step-start |
step-end |
<steps()>
<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )
<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )
<steps()> =
steps( <integer> , <step-position>? )
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
Exemples
>Comparer les fonctions d'évolution
Cet exemple fournit un outil de comparaison entre les différentes fonctions d'évolution avec une animation. Vous pouvez sélectionner une des fonctions d'évolution depuis le menu déroulant parmi quelques mots-clés, certains exemples cubic-bezier()
ou steps()
. Après avoir sélectionné une option, vous pouvez lancer ou interrompre l'animation grâce au bouton correspondant.
HTML
<div>
<div></div>
</div>
<ul>
<li>
<button class="animation-button">Démarrer l'animation</button>
</li>
<li>
<label for="easing-select">Choisir une fonction d'évolution :</label>
<select id="easing-select">
<option selected>linear</option>
<option>linear(0, 0.5 50%, 1)</option>
<option>ease</option>
<option>ease-in</option>
<option>ease-in-out</option>
<option>ease-out</option>
<option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
<option>cubic-bezier(0, 1.1, 0.8, 4)</option>
<option>steps(5, end)</option>
<option>steps(3, start)</option>
<option>steps(4)</option>
</select>
</li>
</ul>
CSS
body > div {
position: relative;
height: 100px;
}
div > div {
position: absolute;
width: 50px;
height: 50px;
background-color: blue;
background-image: radial-gradient(
circle at 10px 10px,
rgb(25 255 255 / 80%),
rgb(25 255 255 / 40%)
);
border-radius: 50%;
top: 25px;
animation: 1.5s infinite alternate;
}
@keyframes move-right {
from {
left: 10%;
}
to {
left: 90%;
}
}
li {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
JavaScript
const selectElem = document.querySelector("select");
const startBtn = document.querySelector("button");
const divElem = document.querySelector("div > div");
startBtn.addEventListener("click", () => {
if (startBtn.textContent === "Démarrer l'animation") {
divElem.style.animationName = "move-right";
startBtn.textContent = "Arrêter l'animation";
divElem.style.animationTimingFunction = selectElem.value;
} else {
divElem.style.animationName = "unset";
startBtn.textContent = "Démarrer l'animation";
}
});
selectElem.addEventListener("change", () => {
divElem.style.animationTimingFunction = selectElem.value;
});
Résultat
Spécifications
Specification |
---|
CSS Easing Functions Level 1> # easing-functions> |
Compatibilité des navigateurs
Loading…
Voir aussi
- Le module des fonctions d'évolution CSS
- Le module des animations CSS
- Le module des transitions CSS
- Un site pour générer des fonctions d'évolution
linear()
(angl.) - Un site pour construire des courbes de Bézier cubiques (angl.)