manuel de référence CSS

règles CSS @

大全 des propriétés CSS

CSS3 Animation-Attribut duration CSS3 Animation-Attribut delay

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

CSS animation-direction属性指定动画是否应在交替的循环中反向播放。

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

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

Animation-direction的使用语法

该属性的语法如下：

Animation-direction: normal | reverse | alternate | alternate-reverse　|　initial　|　inherit

Les exemples suivants montrent comment utiliser l'animation-l'attribut direction.

Exemple

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-Animation-name:　moveit;
　　　　-webkit-Animation-duration:　4s;
　　　　-webkit-Animation-iteration-count:　2;
　　　　-webkit-Animation-direction:　alternate;
　　　　
　　　　Animation-name:　moveit;
　　　　Animation-duration:　4s;
　　　　Animation-iteration-count:　2;
　　　　Animation-direction:　alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Testez pour voir‹/›

Note :Si l'animation est définie pour ne jouer qu'une fois, l'animation-L'attribut direction est invalide, veuillez voirAnimation-iteration-countAttribut

Valeur de l'attribut

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

Valeur	Description
normal	L'animation doit jouer à chaque cycle. C'est la valeur par défaut.
reverse	L'animation doit jouer vers l'arrière à chaque cycle.
alternate	L'animation joue vers l'avant dans le premier cycle, puis vers l'arrière, puis continue d'alterner.
alternate-reverse	L'animation joue vers l'arrière dans le premier cycle, puis vers l'avant, puis continue d'alterner.
initial	Définissez cette propriété à sa valeur par défaut.
inherit	Si spécifié, l'élément associé utilise la valeur calculée de l'attribut animation de son élément parent-direction

Compatibilité du navigateur

Animation-Compatibilité du navigateur pour l'attribut direction, tous les navigateurs populaires prennent en charge cet attribut.

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

Lisez la suite

Veuillez consulter les tutoriels suivants :CSS3Animation。

Attributs et règles associés :Animation，Animation-name，Animation-delay，Animation-timing-function，Animation-iteration-count，Animation-direction，Animation-fill-mode，Animation-play-state，@keyframes。

CSS3 Animation-Attribut duration CSS3 Animation-Attribut delay