Atributo animation-fill-mode CSS

Definição e uso

animation-fill-mode Define se o efeito da animação é visível antes ou após a reprodução da animação.

Notas:Seus valores são uma ou mais palavras-chave de preenchimento separadas por vírgula.

Veja também:

Tutorial do CSS3:Animação CSS

Manual do HTML DOM:Propriedade animationFillMode

Exemplo

Define o modo de preenchimento para o elemento h1:

h1
  {
  animation-fill-mode: forwards;
  }

Sintaxe do CSS

animation-fill-mode : none | forwards | backwards | both;
Valor Descrição
none Não altera o comportamento padrão.
forwards Após a conclusão da animação, mantém o último valor de atributo (definido no último frame-chave).
backwards Durante o período especificado por animation-delay, antes de a animação ser exibida, aplica-se o valor de atributo inicial (definido no primeiro frame-chave).
both Modos de preenchimento para frente e para trás são aplicados.

Detalhes técnicos

Valor padrão: none
Herança: no
Versão: CSS3
Sintaxe do JavaScript: object.style.animationFillMode=none

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Os números com -webkit-, -moz- ou -o- indicam a primeira versão com suporte ao prefixo.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.1
12.0 -o-