animation

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 est un raccourci pour définir les propriétés animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count et animation-direction.

Une liste des propriétés qui peuvent être animées est disponible ; il est à noter que ce sont les mêmes propriétés qui sont supportées par les  transitions CSS.

  • Valeur initiale La concaténation des valeurs initiales des propriétés associées :
    • animation-name: none
    • animation-duration: 0s
    • animation-timing-function: ease
    • animation-delay: 0s
    • animation-iteration-count: 1
    • animation-direction: normal
    • animation-fill-mode: none
  • S'applique à tous les éléments, ainsi que les pseudo-elements::before et ::after
  • Héritée non
  • Pourcentages
  • Média visual
  • Valeur calculée comme chacune des propriétés du raccourci:
    • animation-name: comme spécifié
    • animation-duration: comme spécifié
    • animation-timing-function: comme spécifié
    • animation-delay: comme spécifié
    • animation-direction: comme spécifié
    • animation-iteration-count: comme spécifié
    • animation-fill-mode: comme spécifié
    • animation-play-state: comme spécifié
  • Animable non
  • Ordre canonique l'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

Syntaxe formelle : <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>   

L'ordre est important au sein de chaque définition d'animation : la première valeur qui peut être interprétée comme un <time> sera assignée à animation-duration, et la seconde sera assignée à animation-delay.

Exemples

Voir Animations CSS pour des exemples.

Spécifications

Spécification Statut Commentaire
CSS Animations Working Draft  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base (Oui)-webkit 5.0 (5.0)-moz16.0 (16.0) 10 12-o
12.10 #
4.0-webkit
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base ? 5.0 (5.0)-moz16.0 (16.0) ? Pas de support iOS 2.0-webkit

Voir également

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : Delapouite, tregagnon, teoli, trevorh, FredB
Dernière mise à jour par : tregagnon,
Masquer la barre latérale