Animação de estilo PropriedadeFillMode
Exemplo
Alterando a propriedade animationFillMode de um elemento <div>:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Definição e uso
A propriedade animationFillMode especifica quais estilos serão aplicados ao elemento quando a animação não estiver sendo reproduzida (quando for concluída ou quando tiver um "atraso").
Por padrão, as animações CSS não afetarão o elemento que você está animando até que o primeiro quadro-chave seja "reproduzido" e, em seguida, parará de afetá-lo assim que o último quadro-chave for concluído. A propriedade animationFillMode pode substituir esse comportamento.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Números seguidos por Moz especificam a primeira versão que funcionou com um prefixo.
Property | |||||
---|---|---|---|---|---|
animationFillMode | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
Sintaxe
Retorne a propriedade animationFillMode:
object.style.animationFillMode
Defina a propriedade animationFillMode:
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
Valores de propriedade
Value | Description |
---|---|
none | Default value. The animation will not apply any styles to the target before or after it is executing |
forwards | After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended |
backwards | The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animationDirection is "reverse" or "alternate-reverse") |
both | The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Detalhes técnicos
Valor padrão: | Nenhum |
---|---|
Valor de retorno: | Uma String, representando a propriedade de modo de preenchimento de animação de um elemento |
Versão CSS | CSS3 |
Páginas relacionadas
Referência CSS: propriedade de modo de preenchimento de animação