Propriedade animation-fill-mode

A propriedade animation-fill-mode define em qual posição a animação deve parar após o término. Por padrão, a animação retorna ao valor inicial e isso pode não parecer muito bonito.

Sintaxe

seletor {
	animation-fill-mode: backwards | forwards | both | none;
}

Valores

Valor	Descrição
`none`	Se houver um atraso na animação - durante o tempo de atraso o elemento permanecerá no lugar, e depois saltará para o quadro `0%`. Após o término da animação, o elemento não permanecerá no estado onde parou, mas saltará para o estado inicial.
`backwards`	Faz com que o elemento se mova após o carregamento da página para o quadro `0%`, mesmo que haja um atraso `animation-delay`, e permaneça lá até que a animação comece. Após o término da animação, o elemento não permanecerá no estado onde parou, mas saltará para o estado inicial.
`forwards`	Indica ao navegador que após o término da animação, o elemento permanecerá no estado onde parou.
`both`	Inclui backwards e forwards - após o carregamento da página, o elemento se posicionará no quadro `0%`, e após o término da animação, o elemento permanecerá onde parou.

Valor padrão: none.

Exemplo . Valor none

Neste exemplo, margin-left está definido como 300px para o elemento, e para o primeiro quadro da animação - como 0px. Como não há atraso animation-delay, o elemento, após o carregamento da página, ficará em 0px, e não em 300px. Além disso, após o término, a animação saltará para o valor inicial:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemplo . Valor none

Neste exemplo, margin-left está definido como 300px para o elemento, e para o primeiro quadro da animação - como 0px. Também foi definido um atraso animation-delay de 3 segundos para o elemento, portanto, após o carregamento da página, o elemento ficará em 300px, e não em 0px, e permanecerá lá por 3 segundos, após o início da animação, e então saltará para 0px - e a animação começará de lá. Além disso, após o término, a animação saltará para o valor inicial:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemplo . Valor backwards

Neste exemplo, margin-left está definido como 300px para o elemento, e para o primeiro quadro da animação - como 0px. Também foi definido animation-fill-mode com o valor backwards para o elemento, portanto, após o carregamento da página, o elemento ficará em 0px, e não em 300px, como era o caso para animation-fill-mode com o valor none. Além disso, após o término, a animação saltará para o valor inicial:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: backwards;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemplo . Valor none e número de repetições igual a 1

Neste exemplo, margin-left está definido como 300px para o elemento, e para o primeiro quadro da animação - como 0px. Também foi definido um atraso animation-delay de 3 segundos para o elemento, portanto, após o carregamento da página, o elemento ficará em 300px, e não em 0px, e permanecerá lá por 3 segundos, após o início da animação, e então saltará para 0px - e a animação começará de lá. Como animation-fill-mode está definido com o valor none, após a reprodução da animação, o elemento retornará ao valor inicial:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemplo . Valor forwards e número de repetições igual a 1

Neste exemplo, animation-fill-mode está definido com o valor forwards, e o número de repetições da animação - como 1. Após a reprodução da animação, o elemento permanecerá na posição onde a animação terminou, e não saltará para o ponto inicial.

Além disso, margin-left está definido como 300px para o elemento, e para o primeiro quadro da animação - como 0px. Também foi definido um atraso animation-delay de 3 segundos para o elemento, portanto, após o carregamento da página, o elemento ficará em 300px, e não em 0px, e permanecerá lá por 3 segundos, após o início da animação, e então saltará para 0px - e a animação começará de lá:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemplo . Valor both e número de repetições igual a 1

Neste exemplo, animation-fill-mode está definido com o valor both, e o número de repetições da animação - como 1. Após o carregamento da página, o elemento ficará no primeiro quadro da animação (em 0px, e não em 300px), e após a reprodução da animação, o elemento permanecerá na posição onde a animação terminou, e não saltará para o ponto inicial:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Veja também

a propriedade animation-name,
que define o nome da animação
a propriedade animation-duration,
que define a duração da animação
a propriedade animation-delay,
que define o atraso antes da execução da animação
a propriedade animation-timing-function,
que define a velocidade de execução da animação
a propriedade animation-iteration-count,
que define o número de iterações da animação
a propriedade animation-direction,
que define a direção da animação
a propriedade animation-play-state,
que permite pausar a animação
a propriedade animation,
que é uma abreviação para animações
a regra @keyframes,
que define os quadros-chave da animação
transições suaves transition, que representam uma animação ao passar o mouse sobre o elemento