Propiedad animation-direction

La propiedad animation-direction establece la dirección de la animación. Por defecto, la animación se repetirá sólo 1 vez y luego volverá a su estado original, luego, si se establece un retardo animation-delay, esperará el tiempo establecido y luego el ciclo comenzará de nuevo.

Esta propiedad permite cambiar este comportamiento, por ejemplo, para que la animación después de terminar permanezca en el lugar donde terminó, y no salte a la posición inicial.

También se puede establecer este comportamiento: la animación llegará al punto extremo y volverá hacia atrás (como en transition). Vea la descripción a continuación.

Sintaxis

selector {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Valores

Valor	Descripción
`reverse`	La animación se reproducirá en dirección inversa.
`alternate`	La animación se reproducirá primero en dirección normal, y luego en dirección inversa (como transition).
`alternate-reverse`	La animación se reproducirá desde la posición final a la inicial y viceversa. Esencialmente son los valores `alternate` y `reverse` en uno solo.
`normal`	La animación se reproducirá desde el principio hasta el final, y después de terminar saltará bruscamente a la posición inicial.

Valor por defecto: normal.

Ejemplo

Ahora el elemento se moverá en una dirección, y luego volverá hacia atrás, ya que se estableció el valor alternate. Al mismo tiempo, animation-duration tiene un valor de 3 segundos y esto significa que los movimientos de "ida" y "vuelta" durarán 3 segundos cada uno:

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

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

#elem {
	animation-direction: alternate;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ejemplo

Ahora el elemento se moverá en la dirección contraria (debería ser de izquierda a derecha, pero será de derecha a izquierda):

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

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ejemplo

Ahora el elemento se moverá de un lado a otro, pero en dirección inversa (debería comenzar desde la izquierda, pero comenzará desde la derecha):

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

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

#elem {
	animation-direction: alternate-reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Vea 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 retardo 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-fill-mode,
que establece el estado de la animación
la propiedad animation-play-state,
que permite pausar la animación
la propiedad animation,
que representa 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 un elemento