mozilla
Vos résultats de recherche

    animation-direction

    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-direction précise si l'animation doit se jouer à l'envers ou selon des cycles alternés.

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

    Syntaxe

    Syntax formelle : <single-animation-direction>#
    
    animation-direction: normal
    animation-direction: reverse
    animation-direction: alternate
    animation-direction: alternate-reverse
    animation-direction: normal, reverse
    animation-direction: alternate, reverse, normal
    

    Valeurs

    normal
    L'animation doit se jouer vers l'avant à chaque cycle. En d'autres termes, à chaque fois que l'animation fait un cycle, elle est réinitialisée à son début et recommence de nouveau. Ceci est la valeur par défaut de cette propriété.
    alternate
    L'animation doit changer de sens à chaque cycle. Lorsqu'elle est jouée à l'envers, les étapes de l'animation sont appliquées à reculons. De plus, la temporisation est aussi inversée. Par exemple une animation ease-in est remplacée par une animation ease-out lorsqu'elle est jouée à l'envers.
    reverse
    L'animation est jouée à l'envers à chaque cycle. A chaque fois que l'animation fait un cycle, elle est réinitialisée à son début et recommence de nouveau.
    alternate-reverse
    Comme pour la valeur alternate, l'animation change de sens à chaque cycle. L'animation est jouée à l'envers lors du premier cycle, puis à l'endroit, ensuite à l'envers, et ainsi de suite.

    Exemples

    Voir Animations CSS pour les exemples.

    Spécifications

    Spécification Statut Commentaire
    CSS Animations Working Draft Pour les deux nouvelles valeurs reverse et alternate-reverse, voir cette discussion W3C.

    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
    reverse 19 16.0 (16.0) 10 Pas de support Pas de support
    alternate-reverse 19 16.0 (16.0) 10 Pas de support Pas de support
    Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Support de base ? (Oui)-webkit 5.0 (5.0)-moz
    16.0 (16.0)
    ? ? ?
    reverse ? (Oui)-webkit 16.0 (16.0) ? ? ?
    alternate-reverse ? (Oui)-webkit 16.0 (16.0) ? ? ?

    Voir également

    Étiquettes et contributeurs liés au document

    Contributors to this page: tregagnon, teoli, FredB
    Dernière mise à jour par : teoli,
    Masquer la barre latérale