manual de referência CSS

regras CSS @

大全 de propriedades CSS

CSS3 Animação-Atributo duration CSS3 Animação-Atributo delay

CSS3 Animação-Método de uso e exemplo da propriedade direction

CSS animação-A propriedade direction especifica se a animação deve ser reproduzida ao contrário no ciclo alternado.

A tabela a seguir resume o contexto de uso e o histórico de versões deste atributo.

Valor padrão:	normal
Aplicável a:	Todos os elementos::before e::after Elemento pseudo
Herança:	Nenhum
Animável:	Não.Veja: Propriedade de animação.
Versão:	CSS3nova funcionalidade
Sintaxe JavaScript:	object.style.animationDirection="reverse"

Animação-Uso da sintaxe direction

A sintaxe deste atributo é a seguinte:

Animação-direction: normal | reverse | alternate | alternate-reverse　|　initial　|　inherit

O exemplo a seguir demonstra como usar animation-atributo direction.

Exemplo

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

Teste e veja‹/›

Anotação:Se a animação for configurada para reproduzir apenas uma vez, a animação-direction esse atributo é inválido, consulteAnimação-iteration-countAtributo

Valor do atributo

A tabela a seguir descreve os valores dessa propriedade.

Valor	Descrição
normal	A animação deve ser reproduzida em cada ciclo. Isso é o valor padrão.
reverse	A animação deve ser reproduzida para trás em cada loop.
alternate	A animação é reproduzida para frente no primeiro loop, então para trás, então continua alternando.
alternate-reverse	A animação é reproduzida para trás no primeiro loop, então para frente, então continua alternando.
initial	Defina essa propriedade para seu valor padrão.
inherit	Se especificado, o elemento relacionado adota o valor calculado da propriedade animation do elemento pai.-direction.

Compatibilidade do navegador

Animação-Compatibilidade do atributo direction do navegador, todos os navegadores populares suportam essa propriedade.

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