Propiedad animation-fill-mode

La propiedad animation-fill-mode establece en qué posición debe detenerse la animación después de finalizar. Por defecto, la animación regresa al valor inicial y esto puede no verse muy atractivo.

Sintaxis

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

Valores

Valor	Descripción
`none`	Si hay un retraso en la animación, durante el tiempo de retraso el elemento permanecerá en su lugar, y luego saltará al fotograma `0%`. Después de que finalice la animación, el elemento no permanecerá en el estado donde se detuvo, sino que saltará al estado inicial.
`backwards`	Obliga al elemento a moverse después de cargar la página al fotograma `0%`, incluso si hay un retraso establecido por `animation-delay`, y permanecer allí hasta que comience la animación. Después de que finalice la animación, el elemento no permanecerá en el estado donde se detuvo, sino que saltará al estado inicial.
`forwards`	Indica al navegador que después de que finalice la animación, el elemento permanecerá en el estado donde se detuvo.
`both`	Incluye backwards y forwards - después de cargar la página, el elemento se establecerá en el fotograma `0%`, y después de que finalice la animación, el elemento permanecerá donde se detuvo.

Valor por defecto: none.

Ejemplo . Valor none

En este ejemplo, margin-left está establecido en 300px para el elemento, y para el primer fotograma de la animación - en 0px. Como no hay retraso en animation-delay, el elemento después de cargar la página se posicionará en 0px, y no en 300px. Además de eso, la animación después de finalizar saltará al 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;
}

Ejemplo . Valor none

En este ejemplo, margin-left está establecido en 300px para el elemento, y para el primer fotograma de la animación - en 0px. También se estableció un retraso animation-delay de 3 segundos para el elemento, por lo tanto, después de cargar la página, el elemento se posicionará en 300px, y no en 0px, y permanecerá allí 3 segundos, luego del inicio de la animación saltará a 0px - y la animación comenzará desde allí. Además de eso, la animación después de finalizar saltará al 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;
}

Ejemplo . Valor backwards

En este ejemplo, margin-left está establecido en 300px para el elemento, y para el primer fotograma de la animación - en 0px. También se estableció animation-fill-mode en el valor backwards para el elemento, por lo tanto, después de cargar la página, el elemento se posicionará en 0px, y no en 300px, como ocurría con animation-fill-mode en el valor none. Además de eso, la animación después de finalizar saltará al 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;
}

Ejemplo . Valor none y número de repeticiones igual a 1

En este ejemplo, margin-left está establecido en 300px para el elemento, y para el primer fotograma de la animación - en 0px. También se estableció un retraso animation-delay de 3 segundos para el elemento, por lo tanto, después de cargar la página, el elemento se posicionará en 300px, y no en 0px, y permanecerá allí 3 segundos, luego del inicio de la animación saltará a 0px - y la animación comenzará desde allí. Como animation-fill-mode está establecido en el valor none, después de reproducir la animación el elemento volverá al 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;
}

Ejemplo . Valor forwards y número de repeticiones igual a 1

En este ejemplo, animation-fill-mode está establecido en el valor forwards, y el número de repeticiones de la animación - en 1. Después de reproducir la animación, el elemento permanecerá en la posición donde terminó la animación, y no saltará al punto de origen.

Además, margin-left está establecido en 300px para el elemento, y para el primer fotograma de la animación - en 0px. También se estableció un retraso animation-delay de 3 segundos para el elemento, por lo tanto, después de cargar la página, el elemento se posicionará en 300px, y no en 0px, y permanecerá allí 3 segundos, luego del inicio de la animación saltará a 0px - y la animación comenzará desde allí:

<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;
}

Ejemplo . Valor both y número de repeticiones igual a 1

En este ejemplo, animation-fill-mode está establecido en el valor both, y el número de repeticiones de la animación - en 1. Después de cargar la página, el elemento permanecerá en el primer fotograma de la animación (en 0px, y no en 300px), y después de reproducir la animación, el elemento permanecerá en la posición donde terminó la animación, y no saltará al punto de origen:

<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;
}

Véase también

la propiedad animation-name,
que establece el nombre de la animación
la propiedad animation-duration,
que establece la duración de la animación
la propiedad animation-delay,
que establece el retraso antes de ejecutar la animación
la propiedad animation-timing-function,
que establece la velocidad de ejecución de la animación
la propiedad animation-iteration-count,
que establece el número de iteraciones de la animación
la propiedad animation-direction,
que establece la dirección de la animación
la propiedad animation-play-state,
que permite pausar la animación
la propiedad animation,
que es una forma abreviada para las animaciones
la regla @keyframes,
que establece los fotogramas clave de la animación
las transiciones suaves transition, que representan una animación al pasar el cursor sobre el elemento