Exemplo
Animar algo que se deslocam de um lugar para outro e tê-lo ficar lá:
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
} Tente você mesmo " Definição e Uso
A propriedade-fill-mode animação especifica um estilo 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 afetam o elemento até o primeiro quadro-chave é "played" , e depois pára uma vez que o último quadro-chave foi concluída. A propriedade-fill-mode animação pode substituir esse comportamento.
| Valor padrão: | none |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.animationFillMode="forwards" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit-, -moz-, ou O- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 | 16,0 5.0 -moz- | 4.0 -webkit- | 15,0 -webkit- 12.1 12,0 -o- |
CSS Syntax
animation-fill-mode: 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 para o elemento de destino 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 vai aplicar os valores de propriedade definidos no quadro-chave que vai começar a primeira iteração da animação, durante o período definido pela animação atraso. Estes são os valores do de quadro-chave (when animation-direction is "normal" or "alternate") ou as do Keyframe (when animation-direction is "reverse" or "alternate-reverse") |
| both | A animação irá 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 o valor padrão. Leia sobre inicial |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
Tutorial CSS3: CSS3 animações
Referência HTML DOM: animationFillMode property