Exemplo
Alterar a propriedade animationFillMode de um <div> elemento:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Tente você mesmo " Definição e Uso
A propriedade animationFillMode especifica quais estilos serão aplicadas para o elemento quando a animação não está jogando (when it is finished, or when it has a "delay") .
Por padrão, animações CSS não vai afetar o elemento que você está animando até o primeiro quadro-chave é "played" , e depois pára afetando-lo uma vez que o último quadro-chave foi concluída. A propriedade animationFillMode pode substituir esse comportamento.
Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente a propriedade.
Números seguidos de Moz especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| animationFillMode | 43,0 | Não suportado | 16,0 5.0 Moz | Não suportado | 30,0 |
Sintaxe
Devolver o imóvel animationFillMode:
object .style.animationFillMode Defina a propriedade animationFillMode:
object .style.animationFillMode="none|forwards|backwards|both|initial|inherit"
Valores de propriedade
| Valor | Descrição |
|---|---|
| none | Valor padrão. A animação não vai aplicar quaisquer estilos ao alvo antes ou depois ele está executando |
| forwards | Após a animação termina (determined by animation-iteration-count) , a animação vai aplicar os valores de propriedade para o tempo da animação terminou |
| backwards | A animação irá aplicar os valores de propriedades definidas no quadro-chave que vai iniciar a primeira iteração do animação, durante o período definido por uma animação-atraso. Estes são os valores da partir de quadro-chave (when animation-direction is "normal" or "alternate") ou os do Keyframe (when animationDirection is "reverse" or "alternate-reverse") |
| both | A animação vai seguir as regras para a frente e para trás. Ou seja, ele vai estender as propriedades de animação em ambos os sentidos |
| initial | Define essa propriedade para seu valor padrão. Leia sobre inicial |
| inherit | Herda esta propriedade a partir de seu elemento pai. Leia sobre herdar |
Detalhes técnicos
| Valor padrão: | Nenhum |
|---|---|
| Valor de retorno: | A String, que representa a propriedade de preenchimento-modo de animação de um elemento |
| CSS Versão | CSS3 |
Páginas relacionadas
Referência CSS: animation-fill-mode property
<Estilo de objeto