Propriedade animation-direction

A propriedade animation-direction define a direção da animação. Por padrão, a animação se repete apenas 1 vez e depois retorna ao estado original, em seguida, se houver um atraso definido por animation-delay, ela aguardará o tempo especificado e então o ciclo recomeçará.

Esta propriedade permite alterar esse comportamento, por exemplo, para que a animação, ao terminar, permaneça no ponto onde terminou, em vez de voltar abruptamente para a posição inicial.

Também é possível definir um comportamento em que a animação chega ao ponto extremo e retorna (como em transition). Consulte a descrição abaixo.

Sintaxe

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

Valores

Valor	Descrição
`reverse`	A animação será reproduzida na direção inversa.
`alternate`	A animação será reproduzida primeiro na direção normal, e depois na direção inversa (como transition).
`alternate-reverse`	A animação será reproduzida a partir da posição final para a inicial e vice-versa. Essencialmente, são os valores `alternate` e `reverse` combinados.
`normal`	A animação será reproduzida do início ao fim, e após terminar, saltará de volta para a posição inicial.

Valor padrão: normal.

Exemplo

Agora o elemento se moverá em uma direção e depois retornará, pois o valor alternate está definido. Sendo que animation-duration tem o valor de 3 segundos, o que significa que os movimentos de "ida" e "volta" terão durações de 3 segundos cada:

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

Exemplo

Agora o elemento se moverá na direção inversa (deveria ser da esquerda para a direita, mas será da direita para a esquerda):

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

Exemplo

Agora o elemento se moverá para frente e para trás, mas na direção inversa (deveria começar à esquerda, mas começará à direita):

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

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-fill-mode,
que define o estado da animação
a propriedade animation-play-state,
que permite pausar a animação
a propriedade animation,
que é uma forma abreviada 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 um elemento