Exemplo
Fazer a animação uma vez, em seguida, fazer a animação para trás:
div {
-webkit-animation-direction: alternate; /* Chrome, Safari,
Opera */
animation-direction: alternate;
} Tente você mesmo " Definição e Uso
A propriedade de animação direção define se uma animação deve desempenhar no sentido inverso, ou em ciclos alternados.
| Valor padrão: | normal |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.animationDirection="reverse" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit-, -moz-, ou O- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| animation-direction | 43,0 4.0 -webkit- | 10.0 | 16,0 5.0 -moz- | 9 4.0 -webkit- | 30,0 15,0 -webkit- 12,0 -o- |
CSS Syntax
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| normal | Valor padrão. A animação deve ser jogado como normal | Jogue " |
| reverse | A animação deve desempenhar no sentido inverso | Jogue " |
| alternate | A animação será jogado como normal a cada momento ímpar (1,3,5,etc..) e em sentido inverso cada vez mesmo (2,4,6,etc...) | Jogue " |
| alternate-reverse | A animação será reproduzido em sentido inverso a cada momento ímpar (1,3,5,etc..) e em uma direção normal de cada vez, mesmo (2,4,6,etc...) | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Nota: Os "reverse" e "alternate-reverse" valores não são suportados no Safari.
Páginas relacionadas
Tutorial CSS3: CSS3 animações
Referência HTML DOM: animationDirection property