Atributo animation-direction CSS

Definição e uso

animation-direction Define se a propriedade animation-direction deve reproduzir a animação alternadamente em sentido reverso.

Se o valor de animation-direction for "alternateSe "alternate" for o valor de animation-direction, a animação será reproduzida normalmente nas vezes ímpares (1, 3, 5, etc.) e reproduzida para trás nas vezes pares (2, 4, 6, etc.).

Notas:Se a animação for configurada para ser reproduzida apenas uma vez, essa propriedade não terá efeito.

Veja também:

Tutorial do CSS3:Animação CSS

Manual do HTML DOM:Propriedade animationDirection

Exemplo

Pausar animação:

div {
  animation-direction: alternate;
}

Experimente você mesmo

Sintaxe do CSS

animation-direction: normal|alternate;
Valor Descrição Teste
normal Valor padrão. A animação deve ser reproduzida normalmente. Teste
alternate A animação deve ser reproduzida alternadamente em sentido reverso. Teste

Detalhes técnicos

Valor padrão: normal
Herança: não
Versão: CSS3
Sintaxe do JavaScript: objeto.style.animationDirection="alternate"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Os números com -webkit-, -moz- ou -o- antes indicam a primeira versão que usa o prefixo.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-