Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété animation-timing-function
indique 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 <timing-function>
.
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.
Généralement, on pourra utiliser la propriété raccourcie animation
pour définir l'ensemble des propriétés liées à une animation.
Valeur initiale | ease |
---|---|
Applicabilité | tous les éléments, ainsi que les pseudo-elements ::before et ::after |
Héritée | non |
Média | visuel |
Valeur calculée | comme spécifié |
Animable | non |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
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); /* Gestion de 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;
Valeurs
<timingfunction>
- Chaque fonction
<timing-function>
représente la fonction de progression à associer pour chaque propriété à animer (définie(s) avecanimation-property
).
Syntaxe formelle
<timing-function>#
Exemples
CSS
p { animation-duration: 3s; animation-name: glissement; animation-timing-function: steps(5, end); animation-iteration-count: infinite; } @keyframes glissement { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } }
HTML
<p> La Chenille et Alice se considérèrent un instant en silence. Enfin la Chenille sortit le houka de sa bouche, et lui adressa la parole d’une voix endormie et traînante. </p>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Animations La définition de 'animation-timing-function' dans cette spécification. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Support simple | (Oui)-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0)[1] |
10 | 12 -o 12.10 |
4.0-webkit |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome pour Android |
---|---|---|---|---|---|---|
Support simple | (Oui)-webkit | 5.0 (5.0)-moz 16.0 (16.0)[1] |
? | 12-o | (Oui)-webkit | ? |
[1] En plus de la version préfixée par -moz
, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit
à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit
dont la valeur par défaut vaut false
. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true
.