Propriedade de animação CSS
Exemplo
Vinculando uma animação a um elemento <div>, usando a propriedade abreviada:
div
{
animation: mymove 5s infinite;
}
Definição e uso
A animation
propriedade é uma propriedade abreviada para:
- nome da animação
- duração da animação
- função de temporização de animação
- atraso de animação
- animação-iteração-contagem
- direção de animação
- modo de preenchimento de animação
- estado de reprodução de animação
Nota: Sempre especifique a propriedade animation-duration , caso contrário, a duração será 0 e nunca será reproduzida.
Valor padrão: | nenhum 0 facilidade 0 1 normal nenhum funcionando |
---|---|
Herdado: | não |
Animavel: | não. Leia sobre animáveis |
Versão: | CSS3 |
Sintaxe JavaScript: | object .style.animation="mymove 5s infinito" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Números seguidos por -webkit-, -moz- ou -o- especificam a primeira versão que funcionou com um prefixo.
Property | |||||
---|---|---|---|---|---|
animation | 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- |
Sintaxe CSS
animation: name duration timing-function delay iteration-count
direction fill-mode play-state;
Valores de propriedade
Value | Description |
---|---|
animation-name | Specifies the name of the keyframe you want to bind to the selector |
animation-duration | Specifies how many seconds or milliseconds an animation takes to complete |
animation-timing-function | Specifies the speed curve of the animation |
animation-delay | Specifies a delay before the animation will start |
animation-iteration-count | Specifies how many times an animation should be played |
animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles |
animation-fill-mode | Specifies what values are applied by the animation outside the time it is executing |
animation-play-state | Specifies whether the animation is running or paused |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Páginas relacionadas
Tutorial CSS: Animações CSS
Referência HTML DOM: propriedade de animação