Propriedade animationFillMode do estilo
- Página anterior animationDuration
- Próxima página animationIterationCount
- Voltar à página anterior Objeto Style do HTML DOM
Definição e uso
animationFillMode
A propriedade determina os estilos aplicados ao elemento quando a animação não está em execução (ao final da animação, ou com "atraso").
Por padrão, as animações CSS não afetam o elemento que está sendo animado antes de "tocar" o primeiro frame-chave e param de afetá-lo após o último frame-chave ser concluído.animationFillMode
A propriedade pode sobrepor esse comportamento.
Exemplo
Mude a propriedade animationFillMode do elemento <div>:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Sintaxe
Retorne a propriedade animationFillMode:
objeto.style.animationFillMode
Defina a propriedade animationFillMode:
objeto.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
Valor da propriedade
Valor | Descrição |
---|---|
none | Valor padrão. A animação não aplicará nenhum estilo ao elemento-alvo antes ou após a execução. |
forwards | Após o final da animação (decidido pelo animation-iteration-count), a animação aplicará esse valor de atributo no final da animação. |
backwards |
Durante o período definido pelo animation-delay, a animação aplicará os valores dos atributos definidos no frame-chave, que começarão a primeira iteração da animação. Estes são os valores dos frames-chave (quando a direção da animação é "normal" ou "alternate") ou os valores até os frames-chave (quando a direção da animação é "reverse" ou "alternate-reverse"). |
both | A animação seguirá as regras de avanço e retrocesso. Isso significa que ela estenderá os atributos da animação em ambas as direções. |
initial | Defina essa propriedade para seu valor padrão. Veja também initial. |
inherit | Herda essa propriedade do elemento pai. Veja também inherit. |
Detalhes técnicos
Valor padrão: | none |
---|---|
Retorno: | Cadeia de caracteres, que representa o Propriedade animation-fill-mode. |
Versão do CSS: | CSS3 |
Suporte do navegador
animationFillMode
é uma característica do CSS3 (1999).
Todos os navegadores suportam completamente:
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:Propriedade animation-fill-mode
- Página anterior animationDuration
- Próxima página animationIterationCount
- Voltar à página anterior Objeto Style do HTML DOM