Style animation property

Definition and usage

animation The property is a shorthand for six animation properties:

Note:Always specify animationDuration propertyOtherwise, the duration is 0, and it will never play.

Example

Use the shorthand property to change the animation of the <div> element:

document.getElementById("myDIV").style.animation = "mynewmove 4s 2";

Experimente você mesmo

Sintaxe

Retornar propriedade de animação:

object.style.animation

Definir propriedade de animação:

object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"

Valor do atributo

Valor Descrição
animationName Determina o nome dos frames-chave a serem ligados ao seletor.
animationDuration Determina quantos segundos ou milissegundos a animação levará para ser concluída.
animationTimingFunction Determina a curva de velocidade da animação.
animationDelay Determina o atraso antes do início da animação.
animationIterationCount Determina quantas vezes a animação deve ser reproduzida.
animationDirection Determina se a animação deve ser reproduzida ao contrário em um ciclo alternado.
animationFillMode Determina o valor aplicado além do tempo de execução da animação.
animationPlayState Determina se a animação está em execução ou pausada.
initial Defina essa propriedade para seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: none 0 ease 0 1 normal none running
Valor de retorno: Cadeia de caracteres, que representa o Propriedades de animação.
Versão do CSS: CSS3

Suporte do navegador

animation é uma característica do CSS3 (1999).

Todos os navegadores suportam completamente isso:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Suporte Suporte Suporte Suporte Suporte 11

Páginas relacionadas

Manual de referência CSS:Propriedades de animação