Propriedade CSS animation-fill-mode
A propriedade animation-fill-mode define um estilo para o elemento quando a animação não está a ser reproduzida. Encontre alguns exemplos com valores diferentes.
A propriedade animation-fill-mode define um estilo para o elemento quando a animação não está a ser executada (antes de começar, depois de terminar ou ambos).
A propriedade animation-fill-mode é uma das propriedades CSS3.
A propriedade animation-fill-mode é a única que afeta o elemento antes de o primeiro @keyframe ser reproduzido ou depois de o último keyframe ser reproduzido. Pode assumir os seguintes valores: "forwards" para especificar que o elemento deve manter os valores de estilo definidos pelo último keyframe (dependendo das propriedades animation-iteration-count e animation-direction); "backwards" para especificar que o elemento deve assumir os valores de estilo definidos pelo primeiro keyframe (depende de animation-direction) e mantê-los durante o período de animation-delay; "both" para especificar que a animação deve seguir as regras tanto de "forwards" como de "backwards"; e "none" (predefinição) para especificar que não serão aplicados estilos ao elemento antes ou depois da execução da animação.
Quando são especificados vários valores separados por vírgula para as propriedades abreviadas (shorthand) de animação, estes são aplicados às animações correspondentes definidas em animation-name.
| Valor inicial | none |
|---|---|
| Aplica-se a | Todos os elementos. Aplica-se também aos pseudo-elementos ::before e ::after. |
| Herdada | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.animationFillMode = "forwards"; |
Sintaxe
Sintaxe da propriedade CSS animation-fill-mode
animation-fill-mode: none | forwards | backwards | both | initial | inherit;Exemplo da propriedade animation-fill-mode com o valor "forwards":
Exemplo da propriedade CSS animation-fill-mode com o valor forwards
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #1c87c9;
position: relative;
animation: element 5s;
animation-fill-mode: forwards;
}
@keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: #8ebf42;
}
}
</style>
</head>
<body>
<h2>Animation-fill-mode example</h2>
<div></div>
</body>
</html>Exemplo da propriedade animation-fill-mode com o valor "backwards":
Exemplo da propriedade CSS animation-fill-mode com o valor backwards
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #1c87c9;
position: relative;
animation: element 5s;
animation-fill-mode: backwards;
}
@keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: #8ebf42;
}
}
</style>
</head>
<body>
<h2>Animation-fill-mode example</h2>
<div></div>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| none | É o valor predefinido. A animação não aplicará qualquer estilo ao elemento antes e depois de começar. |
| forwards | Especifica que o elemento deve manter os valores de estilo definidos pelo último keyframe. |
| backwards | Especifica que o elemento deve assumir os valores de estilo definidos pelo primeiro keyframe e mantê-los durante o período de animation-delay. |
| both | Especifica que a animação deve seguir as regras tanto de forwards como de backwards. |
| initial | Faz com que a propriedade utilize o seu valor predefinido. |
| inherit | Herda a propriedade do seu elemento pai. |