mozilla
Vos résultats de recherche

    animation-fill-mode

    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-fill-mode spécifie comment une animation CSS doit appliquer la décoration à sa cible avant et après de s'exécuter.

    Syntaxe

    Syntaxe formelle : <single-animation-fill-mode>#
    
    animation-fill-mode: none
    animation-fill-mode: forwards
    animation-fill-mode: backwards
    animation-fill-mode: both
    
    Le # indique que plusieurs valeurs peuvent être données, séparées par des virgules.
    Chacune s'applique à l'animation définie dans le même ordre que dans animation-name.
    animation-fill-mode: none, backwards
    animation-fill-mode: both, forwards, none
    

    Valeurs

    none
    L'animation n'applique pas de décoration à la cible avant ou après son exécution.
    forwards
    La cible conserve les valeurs calculées définies par la dernière keyframe rencontrée lors de l'exécution. La dernière keyframe rencontrée dépend de la valeur de animation-direction et animation-iteration-count :
    animation-direction animation-iteration-count dernière keyframe rencontrée
    normal pair ou impair 100% ou to
    reverse pair ou impair 0% ou from
    alternate pair 0% ou from
    alternate impair 100% ou to
    alternate-reverse pair 100% ou to
    alternate-reverse impair 0% ou from
    backwards
    L'animation appliquera les valeurs définies dans la première keyframe pertinente dès qu'elle est appliquée à la cible, et conservera ces valeurs durant la période animation-delay. La première keyframe pertinent dépend de la valeur de animation-direction :
    animation-direction première keyframe pertinente
    normal or alternate 0% ou from
    reverse or alternate-reverse 100% ou to
    both
    L'animation suivra les règles pour les valeurs forwards et backwards, ce qui étend les propriétés de l'animation aux deux directions de lecture.

    Exemples

    h1 {
      animation-fill-mode: forwards;
    }
    

    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)-moz 10 -ms ? 4.0-webkit
    Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Support de base ? ? ? ? ?

    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