Propriedade animationFillMode do estilo

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";

Experimente você mesmo

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