<easing-function>
Le type de données 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 et mot-clé pour une évolution linéaire */
/* linear(<liste-points>) */
linear(1, -0.5, 0)
linear
/* fonction et mots-clés pour les courbes de Bézier cubiques */
/* cubic-bezier(<x1>, <y1>, <x2>, <y2>) */
cubic-bezier(0.25, 0.1, 0.25, 1)
ease
ease-in
ease-out
ease-in-out
/* fonctions et mots-clés pour les évolutions en escalier */
/* steps(<nombre-de-marches>, <direction>) */
steps(4, end)
steps(10, jump-both)
step-start
step-end
Valeurs
linear
-
Indique que l'évolution a lieu à vitesse constante pendant toute la durée. Ce mot-clé est à la fois équivalent à
cubic-bezier(0, 0, 1, 1)
et àlinear(0, 1)
.
<linear-easing-function>
-
Définit une fonction
linear()
avec un ou plusieurs arrêts linéaires, chacun pouvant contenir jusqu'à deux longueurs d'arrêt optionnelles afin de contrôler la progression de l'animation ou de la transition.La fonction
linear()
prend comme argument une liste d'arrêts linéaires séparés par des virgules qui indiquent les points par lesquels progressent l'animation ou la transition. Chaque point de la liste est indiqué par un nombre (une valeur de type<number>
) comprise entre0
et1
(inclus). Par défaut, chaque arrêt est équidistant des autres, mais on peut aussi préciser un à deux pourcentages qui précisent la longueur.-
<number>
: représente un point dans le temps sur la durée de l'animation ou de la transition. La valeur0
représente le début de l'itération et1
la fin. Il est possible d'utiliser des valeurs en dehors de l'intervalle [0,1]. -
<percentage>
: indique la position de l'arrêt linéaire dans la durée. On peut avoir deux coefficients en pourcentages. Si une seule valeur est fournie, elle indique le départ de l'arrêt linéaire correspondant. Si deux valeurs sont fournies, elles définissent la longueur de l'arrêt : la première indiquant le point de départ et le second le point d'arrivée pour ce segment. Si aucun pourcentage n'est fourni (le comportement par défaut), les arrêts sont répartis à équidistance sur la ligne chronologique.
-
<cubic-bezier-easing-function>
-
Définit une courbe de Bézier cubique donnant la progression de l'animation ou de la transition dans le temps. En CSS, les courbes de Bézier sont définies par 4 points de contrôle qui décrivent mathématiquement la courbe : un point de départ, un point final, et deux points de contrôles. On peut définir une telle fonction de deux façons : en créant une courbe paramétrée sur mesure avec ces quatre points grâce à la fonction
cubic-bezier()
ou en utilisant un des mots-clés prédéfinis qui correspondent aux paramètres usuels utilisés pour les courbes de Bézier. Les valeurs des mots-clés prédéfinis sont :ease
: Ce mot-clé correspond àcubic-bezier(0.25, 0.1, 0.25, 1)
. Il indique que l'interpolation démarre doucement, accélère vivement, puis ralentit progressivement. Le comportement est semblable à celui obtenu avec le mot-cléease-in-out
, mais accélère plus fortement au début.ease-in
: Ce mot-clé correspond àcubic-bezier(0.42, 0, 1, 1)
. Il indique que l'interpolation démarre doucement, puis accélère progressivement jusqu'à la fin, avant de s'arrêter brutalement.ease-out
: Ce mot-clé correspond àcubic-bezier(0, 0, 0.58, 1)
. Il indique que l'interpolation démarre brutalement, puis ralentit progressivement jusqu'à la fin.ease-in-out
: Ce mot-clé correspond àcubic-bezier(0.42, 0, 0.58, 1)
. Il indique que l'interpolation démarre doucement, accélère, puis ralentit à nouveau vers la fin. Au début, le comportement est proche de celui deease-in
, et à la fin, semblable à celui deease-out
.cubic-bezier()
: Cette fonction prend quatre coefficients numériques (type<number>
) pour construire la courbe.<number>
: Quatre valeurs définissent les coordonnées des points P1 et P2 de la courbe.<x1>
et<y1>
sont les coordonnées du point P1, et<x2>
et<y2>
celles du point P2.<x1>
et<x2>
doivent être comprises entre0
et1
.
<step-easing-function>
-
Définit une fonction en escalier qui divise l'animation en plusieurs paliers de même longueur. L'animation passe d'un palier à l'autre plutôt que de transitionner progressivement. Cette valeur sera l'un des deux mots-clés prédéfinis suivants ou une fonction
steps()
paramétrée sur mesure :step-start
: Ce mot-clé est équivalent àsteps(1, jump-start)
ousteps(1, start)
. Il indique que l'interpolation passe immédiatement à l'état final et reste ainsi jusqu'à la fin.step-end
: Ce mot-clé est équivalent àsteps(1, jump-end)
ousteps(1, end)
. Il indique que l'interpolation reste dans l'état initial jusqu'au dernier moment où elle passe directement à l'état final.steps()
: Cette fonction prend en paramètre un entier et un autre paramètre optionnel qui indique la position du saut.-
<integer>
: Ce coefficient indique le nombre d'intervalles (ou marches) équidistants. Ce doit être un entier positif, supérieur à0
, sauf si le deuxième paramètre vautjump-none
, auquel cas, le coefficient doit être un entier supérieur à1
. -
<step-position>
: Cet argument optionnel définit le moment du saut et précise s'il a lieu au début, à la fin, au début et à la fin ou ni à l'un ou l'autre. Les mots-clés qui peuvent être utilisés pour ce paramètre sont :jump-start
: Indique que le premier saut se produit tout au début, au point0
. Aucun moment de l'animation ne se passe au point0%
.jump-end
: Indique que le dernier saut se produit tout à la fin, au point1
. Aucun moment de l'animation ne se passe au point100%
. Il s'agit de la valeur par défaut quand aucune valeur<step-position>
n'est précisée.jump-none
: Indique qu'aucun saut n'a lieu au début ou à la fin, retirant ainsi un palier sur toute l'évolution. Dans ce cas, la durée de chaque palier est déterminée en divisant la durée totale par le nombre de paliers (1/n).jump-both
:Indique que le saut a lieu à la fois au début et à la fin. En pratique, cela ajoute un palier à chaque extrémité. Aucun moment n'est passé aux points de progression0%
et100%
.start
: Équivalent àjump-start
.end
: Équivalent àjump-end
.
-
Description
Il existe trois types de fonction d'évolution :
Fonctions d'évolution linéaire
La fonction linear()
permet d'obtenir une progression linéaire par segments. L'interpolation a lieu à vitesse constante du début jusqu'à la fin. Généralement, on utilise la fonction linear()
en lui fournissant de nombreux points afin de construire l'approximation d'une courbe.
Par exemple, avec la fonction linear(0, 0.25, 1)
, l'animation ou la transition démarre au point 0 et progresse linéairement jusqu'au quart de l'animation, puis progresse linéairement jusqu'au point 1
. Aucun pourcentage <linear-stop-length>
n'étant indiqué, la même durée s'applique (50%) pour le passage de 0
à 0.25
et celui de 0.25
à 1
.
Par défaut, les arrêts sont équidistants. Ainsi, s'il y a 5 arrêts, ils se situeront respectivement à 0%, 25%, 50%, 75%, et 100% de la durée. On peut utiliser des pourcentages pour spécifier des valeurs <linear-stop-length>
afin de contrôler plus précisément le début et/ou la fin de chaque segment.
Prenons une animation qui dure 100 secondes et progresse sur 100 pixels. Si on spécifie l'évolution de l'animation avec linear(0, 0.25 75%, 1)
, elle progressera de 25 pixels pendant les 75 premières secondes (75% de la durée) et les 75 derniers pixels seront parcourus pendant les 25 secondes restantes. Si on avait utilisé linear(0, 0.5 25% 75%, 1)
, l'animation aurait atteint 50 en 25 secondes, serait restée ainsi pendant 50 secondes (75%-25% de 100s) et les 50 derniers pixels auraient été parcourus pendant les 25 secondes restantes. linear(0, 0.5 25% 75%, 1)
est équivalent à linear(0, 0.5 25%, 0.5 75%, 1)
.
Note : Le mot-clé linear
est équivalent à linear(0, 1)
. Bien que le mot-clé linear
soit toujours interprété tel quel, la fonction linear(0, 1)
est interprétée comme linear(0 0%, 1 100%)
.
Fonctions d'évolution en courbe de Bézier cubique
La notation fonctionnelle cubic-bezier()
permet de définir une courbe de Bézier cubique. Ces fonctions permettent d'avoir des progressions initiales et finales plus douces.
Une courbe de Bézier cubique est définie par quatre points : P0, P1, P2, et P3. Les points P0 et P3 représentent le début et la fin de la courbe. Ces derniers sont fixés ici en CSS : P0 est en (0, 0)
et représente l'instant et la progression initiaux, tandis que P3 est situé en (1, 1)
et correspond à l'état final.
Toutes les courbes de Bézier cubiques ne peuvent pas être utilisées comme fonctions d'évolution, car toutes ne sont pas des fonctions mathématiques (c'est-à-dire des courbes pour lesquelles une abscisse donnée possède au plus une valeur en ordonnée). En CSS, P0 et P3 sont fixes et dans ces conditions, pour qu'une courbe de Bézier cubique soit une fonction, il faut (et il suffit) que les abscisses de P1 et P2 appartiennent à l'intervalle [0, 1]
.
Dans le cas de courbes de Bézier cubiques où les ordonnées de P1 ou P2 sont en dehors de l'intervalle [0, 1]
, la valeur pourra aller plus loin que l'état final puis revenir. Pour les animations CSS et certaines propriétés comme left
ou right
, cela pourra créer un effet de rebond.
Toutefois, certaines propriétés écrêteront la valeur produit si elle dépasse un intervalle autorisé. Ainsi, si la composante d'une couleur devient supérieure à 255 ou inférieure à 0 pour rgb()
, ce sera la valeur la plus proche et dans l'intervalle autorisé qui sera utilisée. Selon les coefficients passés à cubic-bezier()
, on pourra observer ce comportement.
Quand une courbe de Bézier invalide est fournie, le moteur CSS ignore la propriété dans son ensemble.
Les mots-clés ease
, ease-in
, ease-out
, et ease-in-out
sont équivalents à des valeurs spécifiques de cubic-bezier()
(voir plus haut).
Fonctions d'évolution en escalier
La notation fonctionnelle steps()
définit une fonction en escalier qui divise le segment des valeurs produites en paliers de même longueur.
Voici quelques exemples d'illustration avec steps()
:
steps(2, jump-start) /* équivalent à steps(2, start) */
steps(4, jump-end) /* équivalent à steps(4, end) */
steps(5, jump-none)
steps(3, jump-both)
Les mots-clés step-start
et step-end
sont équivalents à une valeur spécifique de steps()
.
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
Utiliser la fonction cubic-bezier()
Ces courbes de Bézier cubiques sont valides en CSS :
/* Une courbe de Bézier cubique canonique avec 4 nombres,
tous dans l'intervalle [0,1]. */
cubic-bezier(0.1, 0.7, 1.0, 0.1)
/* On peut utiliser des valeurs de type <integer>, car
toute valeur <integer> est aussi de type <number>. */
cubic-bezier(0, 0, 1, 1)
/* Les ordonnées peuvent être négatives, ce qui donnera
un effet de rebond. */
cubic-bezier(0.1, -0.6, 0.2, 0)
/* Les ordonnées peuvent aussi être supérieures à 1.0. */
cubic-bezier(0, 1.1, 0.8, 4)
Les définitions de ces courbes de Bézier cubiques sont invalides :
/* Bien que la sortie de l'animation puisse être une couleur,
les courbes de Bézier ne manipulent que des ratios numériques. */
cubic-bezier(0.1, red, 1.0, green)
/* Les abscisses doivent appartenir à l'intervalle [0, 1] et la
courbe doit être une fonction temporelle. */
cubic-bezier(2.45, 0.6, 4, 0.1)
/* Les deux points doivent être définis, il n'y a pas
de valeur par défaut. */
cubic-bezier(0.3, 2.1)
/* Les abscisses doivent appartenir à l'intervalle [0, 1] et la
courbe doit être une fonction temporelle. */
cubic-bezier(-1.9, 0.3, -0.2, 2.1)
Utiliser la fonction steps()
Ces fonctions d'évolution sont valides :
/* Il y a ici 5 paliers et le dernier prend
place avant la fin de l'animation. */
steps(5, end)
/* Un escalier sur deux marches, dont la première
se produit au début de l'animation. */
steps(2, start)
/* Le second paramètre est optionnel. */
steps(2)
Note : Si l'animation contient plusieurs arrêts, les marches définies dans la fonction steps()
s'appliqueront à chaque section de l'animation. Ainsi, si une animation contient trois segments et qu'on utilise steps(2)
, il y aura 6 paliers au total, 2 pour chaque segment.
Les fonctions d'évolution qui suivent sont invalides :
/* Le premier paramètre doit être de type <integer>. Ce ne
peut pas être une valeur réelle, même si elle est égale
à une valeur entière. */
steps(2.0, jump-end)
/* Le nombre de marches doit être positif. */
steps(-3, start)
/* Il doit y avoir au moins un palier. */
steps(0, jump-none)
Spécifications
Specification |
---|
CSS Easing Functions Level 1 # easing-functions |
Compatibilité des navigateurs
BCD tables only load in the browser