animation-fill-mode CSS propriété

Définition de la CSS animation-fill-mode.

La propriété d'Animation CSS animation-fill-mode permet de spécifier à quel moment de l'animation CSS les effets sont apparents (avant, après).

Exemple de syntaxe CSS animation-fill-mode :

animation-fill-mode : none;
animation-fill-mode : backwards;
animation-fill-mode : forwards;
animation-fill-mode : both;

La propriété d'Animation CSS animation-fill-mode accepte une/des valeurs suivantes :

none : n'applique aucune propriété CSS spécifiée dans @keyframes, valeur par défaut.
backwards : applique les propriétés CSS de la première image clé (0% ou from), même s'il y a un délai d'attente (animation-delay).
forwards : conserve les propriétés CSS de la dernière image clé (100% ou to). Si la propriété animation-direction:alternate et que animation-iteration-count est définie à une valeur paire alors on conserve les propriétés CSS de la première image clé (0% ou from).
both : prend en compte les règles des valeurs forwards et backwards.

Découvrez la page dédiée pour comprendre le principe de base d'une animation en CSS3.

Exemple de code animation-fill-mode CSS

Conditions d'application de la CSS animation-fill-mode.

La valeur de la CSS animation-fill-mode peut être mise directement dans la propriété de raccourci CSS animation.

Héritage des valeurs Css de animation-fill-mode.

La valeur de la propriété d'Animation CSS animation-fill-mode n'est pas héritée

Problème d'interprétation de animation-fill-mode en Css.

La propriété d'Animation CSS animation-fill-mode pose des problèmes d'interprétation, n'est pas reconnue par Internet Explorer < 10 et Firefox < 19 et Opera < 12.1.

Règles de syntaxes CSS pour animation-fill-mode.

Règles d'écriture de la propriété d'Animation CSS : animation-fill-mode

La propriété d'Animation CSS animation-fill-mode accepte une ou plusieurs valeurs citées ci-dessus qui seront séparées par une virgule.
Le nombre de valeurs est lié aux nombre de nom d'animations déclaré dans propriété d'Animation CSS animation-name.
Si vos valeurs sont identiques, vous pouvez mettre une seule valeur.

Exemple d'écriture CSS de animation-fill-mode :

.mes-animations{
  animation-name : animation-une, animation-deux;
  animation-fill-mode : backwards , forwards ;
}

Compatibilités navigateurs de la propriété animation-fill-mode

Détails des versions de la CSS animation-fill-mode: Propriété animation-fill-mode est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS animation-fill-mode: Propriété CSS animation-fill-mode est compatible à partir de Chrome 43; Propriété CSS animation-fill-mode est compatible à partir de Firefox 16; Propriété CSS animation-fill-mode est compatible à partir de Internet Explorer 10; Propriété CSS animation-fill-mode est compatible à partir de Opera 12.10; Propriété CSS animation-fill-mode est incompatible pour Safari

Propriétés CSS préfixées de animation-fill-mode

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété animation-fill-mode CSS :

Pour Firefox 5.0+ et < 19, vous pouvez utiliser : -moz-animation-fill-mode.
Pour Chrome 2.1+ et Safari 4.0 +, vous pouvez utiliser : -webkit-animation-fill-mode, Attention, -webkit-animation-fill-mode n'est reconnue sur Android qu'a partir de la version 2.3.
Pour Opera 12+, vous pouvez utiliser : -o-animation-fill-mode. Pour info, il semble les versions préfixées pour les animations CSS soient supprimées sur la version 12.50 au profit des versions w3c non préfixées.
Il existe bien une propriété CSS -ms-animation-fill-mode mais qui est compatible Internet Explorer 10 (donc pas d'intérêt de la mettre). Personnellement, je n'ai trouvé aucune documentation officielle sur la propriété css -ms-animation-fill-mode

Votre avis sur la définition animation-fill-mode en CSS

Votez pour la définition CSS `animation-fill-mode`

Votes: 4.3 / 5 - 6 votes
Cliquez sur une étoile pour voter.

Définitions annexes à la Css animation-fill-mode

Définitions CSS annexes animation-fill-mode

@keyframes{}: La règle d'Animation CSS @KEYFRAMES{} permet spécifier les images clés d'une animation CSS. Exemple d'écriture CSS de @keyframes @keyframes identifiant{...[ @keyframes{} ]
animation: La propriété d'Animation CSS ANIMATION est un raccourci permet de spécifier l'ensemble des propriétés CSS d'Animation à appliquer une animation CSS.Ex...[ animation ]
animation-delay: La propriété d'Animation CSS ANIMATION-DELAY permet de spécifier la durée de latence (pause) avant de démarrer une animation CSS.Exemple d'écriture CS...[ animation-delay ]
animation-name: La propriété d'Animation CSS ANIMATION-NAME permet de spécifier l'identifiant de l'animation CSS.Exemple d'écriture CSS de animation-name @keyframes a...[ animation-name ]