Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Vos résultats de recherche

    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, animation-direction, animation-fill-mode et animation-play-state.

    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
    La définition de 'animation' dans cette spécification.
    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 : 
    Contributors to this page: gudoy, tregagnon, FredB, trevorh, Delapouite, teoli
    Dernière mise à jour par : gudoy,