Exemplo
Encadernação uma animação a um <div> elemento, usando a propriedade abreviada:
div
{
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
Tente você mesmo " Definição e Uso
A propriedade de animação é uma propriedade estenográfica para oito das propriedades de animação:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Note: Sempre especificar a propriedade de animação duração, caso contrário, a duração é de 0, e nunca será reproduzida.
| Valor padrão: | none 0 ease 0 1 normal none running |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.animation="mymove 5s infinite" 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 | 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:name duration timing-function delay iteration-count
direction fill-mode play-state;Valores de propriedade
| Valor | Descrição |
|---|---|
| animation-name | Especifica o nome do quadro-chave que você deseja vincular ao selector |
| animation-duration | Especifica quantos segundos ou milissegundos uma animação leva para completar |
| animation-timing-function | Especifica a curva de velocidade da animação |
| animation-delay | Especifica um atraso antes que a animação vai começar |
| animation-iteration-count | Especifica quantas vezes uma animação deve ser jogado |
| animation-direction | Especifica se a animação deve desempenhar no reverso em ciclos alternados |
| animation-fill-mode | Especifica que valores são aplicados pela animação fora do tempo que está executando |
| animation-play-state | Especifica se a animação está em execução ou em pausa |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
Tutorial CSS3: CSS3 animações
Referência HTML DOM: animation property