We want to help developers like you. Tell us about how you work: http://qsurvey.mozilla.com/s3/Developer-Audience-Survey-V2/?s=mdn

animation-timing-function

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.

Résumé

La propriété CSS animation-timing-function spécifie la manière dont l'animation CSS progresse au cours de chaque cycle. Les différentes valeurs possibles sont une ou plusieurs <timing-function>.

Pour les animations utilisant les keyframes, la fonction de temporisation s'applique entre les keyframes plutôt que sur toute l'animation. En d'autres termes, la fonction de temporisation s'applique depuis le début de la keyframe jusqu'à la fin de la même keyframe.

Une fonction de temporisation d'animation définie dans un bloc keyframe s'applique à cette même keyframe. Si aucune fonction de temporisation n'est définie pour une keyframe, la fonction spécifiée pour l'animation en général est utilisée.

Il est souvent utile d'utiliser la propriété raccourcie animation afin de définir toutes les propriétés en une fois.

Valeur initialeease
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Syntaxe formelle : <timing-function>#
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: cubic-bezier(0.1, 0.7, 1.0, 0.1)
animation-timing-function: step-start
animation-timing-function: step-end
animation-timing-function: steps(4, end)

animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)

Valeurs

<timingfunction>
Chaque <timing-function> représente une fonction de temporisation à lier à la propriété à animer correspondante, comme défini dans animation-property.

Exemples

Voir Animations CSS pour des exemples.

Spécifications

Spécification Statut Commentaire
CSS Animations
La définition de 'animation-timing-function' dans cette spécification.
Version de travail  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base (Oui)-webkit 5.0 (5.0)-moz 10 -ms ? 4.0-webkit
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? ? ? ? ?

Voir également

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : mrstork, teoli, Sebastianz, coets, FredB, tregagnon
 Dernière mise à jour par : mrstork,