manuel de référence CSS

règles @CSS (RULES)

大全 des propriétés CSS

CSS3 Animation-Iteration-Attribut count CSS3 Animation-Attribut duration

CSS3 Animation-Fill-mode 属性使用方法及示例

CSS3 Animation-Fill-mode属性指定CSS动画在执行之前和之后，如何将样式应用于其目标。

下表总结了此属性的用法上下文和版本历史记录。

默认值：	None
适用于：	所有元素::before和::after 伪元素
继承：	没有
可动画制作：	否。请参见动画属性.
版本：	CSS3的新功能
JavaScript 语法：	object.style.animationFillMode="forwards"

Animation-Fill-mode的使用语法

该属性的语法如下：

Animation-Fill-mode: none | forwards | backwards | both | initial | inherit

Les exemples suivants montrent comment utiliser l'animation-Fill-Attribut mode.

Exemple

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: red;
　　　　position: relative;
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-Animation-name: moveit;
　　　　-webkit-Animation-duration:　4s;
　　　　-webkit-Animation-Fill-mode: forwards;
　　　　
　　　　Animation-name: moveit;
　　　　Animation-duration:　4s;
　　　　Animation-Fill-mode: forwards;
}
　
/*　Chrome, Safari, Opera　*/
@-webkit-keyframes moveit {
　　　　From {left: 0;}
　　　　To {left:　50%;}
}
　
@keyframes moveit {
　　　　From {left: 0;}
　　　　To {left:　50%;}
}

Testez pour voir‹/›

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cet attribut.

Valeur	Description
None	L'animation n'appliquera aucun style au cible avant ou après son exécution.
Forwards	Après la fin de l'animation (décidée parAnimation-Iteration-Countanimation appliquera les valeurs des propriétés à la fin de l
Backwards	L'animation applique les valeurs des propriétés définies dans les animations clés, l'animation clé qui sera déterminée parAnimation-DelayPremière itération de l'animation démarrant dans la période définie par l'attribut, ces sont les valeurs de l'animation clé from（Animation-DirectionPour normal ou pour alternate）ou pour la valeur de l'animation clé（Animation-DirectionPour reverse ou pour alternate-Reversed）。
Both	L'animation suit les règles vers l'avant et vers l'arrière, ce qui étend les propriétés d'animation dans les deux directions.
Initial	Définir cette propriété à sa valeur par défaut.
Inherit	Si spécifié, l'élément lié utilise l'animation de son élément parent-Fill-Valeur calculée de l'attribut mode.

Compatibilité du navigateur

Animation-Fill-Compatibilité du navigateur pour l'attribut mode, tous les navigateurs principaux supportent cet attribut.

	Firefox 5+ ^-moz-,15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-,15+ ^-webkit-

Pour en savoir plus

Veuillez consulter les tutoriels suivants :CSS3Animation.

Attributs et règles associés : 　 Animation,Animation-Nom,Animation-Duration,Animation-Timing-Fonction,Animation-Delay,Animation-Iteration-Count,Animation-Direction,Animation-Play-State,@keyframes.

CSS3 Animation-Iteration-Attribut count CSS3 Animation-Attribut duration