animation-timing-function

La propriété animation-timing-function définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions easing-function.

Exemple interactif

Généralement, on pourra utiliser la propriété raccourcie animation pour définir l'ensemble des propriétés liées à une animation.

Syntaxe

/* Valeurs avec un mot-clé */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Valeurs fonctionnelles */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);

/* Valeurs avec une fonction en escalier */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/* Définition de temporisations pour plusieurs animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Valeurs globales */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;

Pour les animations cadencées (keyframed), la fonction s'applique entre chaque étape (ou @keyframes) plutôt que sur l'animation dans son ensemble. Autrement dit, la fonction de timing est appliquée au début et à la fin de l'étape de l'animation.

Une fonction de progression pour une animation qui est définie pour une étape sera appliquée à cette étape en particulier. Si aucune fonction n'est définie pour l'étape, ce sera la fonction de progression de toute l'animation qui sera utilisée.

Valeurs

<timing-function>

Chaque valeur easing-function représente une fonction temporelle à rattacher à une animation définie grâce à animation-name.

Les valeurs avec des mots-clés (ease, linear, ease-in-out, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction cubic-bezier() permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser l'animation en intervalles de même durée.

ease

Correspond à cubic-bezier(0.25, 0.1, 0.25, 1.0) : c'est la valeur par défaut, la vitesse de l'animation augmente au milieu de celle-ci puis ralentit à la fin.

linear

Correspond à cubic-bezier(0.0, 0.0, 1.0, 1.0) : l'animation s'effectue à vitesse constante.

ease-in

Correspond à cubic-bezier(0.42, 0, 1.0, 1.0) : l'animation commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.

ease-out

Correspond à cubic-bezier(0, 0, 0.58, 1.0) : l'animation commence rapidement puis ralentit jusqu'à la fin.

ease-in-out

Correspond à cubic-bezier(0.42, 0, 0.58, 1.0) : l'animation commence lentement, accèlere puis ralentit à nouveau avant la fin.

cubic-bezier(p1, p2, p3, p4)

Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.

steps( n, <jumpterm>)

L'animation s'effectue selon n étapes de durées égales. Ainsi, si n vaut 5, l'animation se composera de cinq paliers. Selon la valeur du paramètre jumpterm, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) :

jump-start

La fonction est continue à gauche et le premier saut se produit au début de l'animation.

jump-end

La fonction est continue à droite et le dernier saut se produit à la fin de l'animation.

jump-none

Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).

jump-both

Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant l'animation.

start

Identique à jump-start.

end

Identique à jump-end.

step-start

Synonyme de steps(1, jump-start)

step-end

Synonyme de steps(1, jump-end)

Note : Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété animation-*, elles seront affectées selon leur ordre aux différentes animations listées par animation-name. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir Paramétrer plusieurs valeurs de propriétés pour les animations.

Syntaxe formelle

animation-timing-function = 
<easing-function>#

<easing-function> =
linear |
<cubic-bezier-easing-function> |
<step-easing-function>

<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? ) <step-position>

<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end

Exemples

Courbes de Bézier cubiques

.ease {
   animation-timing-function: ease;
}
.easein {
   animation-timing-function: ease-in;
}
.easeout {
   animation-timing-function: ease-out;
}
.easeinout {
   animation-timing-function: ease-in-out;
}
.linear {
   animation-timing-function: linear;
}
.cb {
   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
}

Fonctions en escalier

.jump-start {
   animation-timing-function: steps(5, jump-start);
}
.jump-end {
   animation-timing-function: steps(5, jump-end);
}
.jump-none {
   animation-timing-function: steps(5, jump-none);
}
.jump-both {
   animation-timing-function: steps(5, jump-both);
}
.start {
   animation-timing-function: steps(5, start);
}
.end {
   animation-timing-function: steps(5, end);
}
.step-start {
   animation-timing-function: step-start;
}
.step-end {
   animation-timing-function: step-end;
}

Spécifications

Spécification État Commentaires
CSS Animations Level 1
La définition de 'animation-timing-function' dans cette spécification.
Version de travail Définition initiale..
Valeur initialeease
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi