catálogo de referencia CSS

CSS @reglas (RULES)

catálogo de atributos CSS

CSS3 animación-Atributo duration CSS3 animación-Atributo delay

CSS3 animación-direction 属性使用方法及示例

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

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

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

animación-direction的使用语法

该属性的语法如下：

animación-direction: normal | reverse | alternate | alternate-reverse　|　initial　|　inherit

El siguiente ejemplo muestra cómo usar animation-Atributo dirección.

Ejemplo

.box　{
　　　　ancho:　50px;
　　　　altura:　50px;
　　　　fondo:　rojo;
　　　　posición:　relativa;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animación-nombre:　moveit;
　　　　-webkit-animación-tiempo:　4s;
　　　　-webkit-animación-iteración-número:　2;
　　　　-webkit-animación-dirección:　alternate;
　　　　
　　　　animación-nombre:　moveit;
　　　　animación-tiempo:　4s;
　　　　animación-iteración-número:　2;
　　　　animación-dirección:　alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Pruebe y vea‹/›

Nota：Si se configura la animación para que se reproduzca solo una vez, el atributo animation-El atributo dirección no es válido, consulteanimación-iteración-númeroAtributo

Valor del atributo

La tabla a continuación describe los valores de este atributo.

Valor	Descripción
normal	La animación debe reproducirse en cada ciclo. Este es el valor predeterminado.
reverse	La animación debe reproducirse hacia atrás en cada ciclo.
alternate	La animación se reproduce hacia adelante en el primer ciclo, luego hacia atrás y luego se reproduce alternativamente.
alternate-reverse	La animación se reproduce hacia atrás en el primer ciclo, luego hacia adelante y luego se reproduce alternativamente.
initial	Establezca este atributo en su valor predeterminado.
inherit	Si se especifica, el elemento relacionado utiliza el valor calculado del atributo animación del elemento padre-dirección。

Compatibilidad del navegador

animación-La compatibilidad del navegador del atributo dirección, todos los navegadores principales admiten este atributo.

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

Leer más

Consulte los siguientes tutoriales：CSS3Animación。

Atributos y reglas relacionados：animación，animación-nombre，animación-delay，animación-tiempo-función，animación-iteración-número，animación-dirección，animación-rellenar-modo，animación-reproducir-estado，@keyframes。

CSS3 animación-Atributo duration CSS3 animación-Atributo delay