Propriedade animation

A propriedade animation é uma propriedade abreviada para animação, permite definir todas as propriedades para animação simultaneamente: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

A ordem dos valores não importa, o tempo de duração da animação animation-duration obrigatoriamente deve estar antes do atraso animation-delay. As únicas propriedades obrigatórias são animation-name e animation-duration.

A propriedade também pode receber o valor none, que desativa a animação completamente. Este valor é o valor padrão.

Sintaxe

seletor {
	animation: valores;
}

Exemplo

Neste exemplo, haverá um atraso de 3 segundos antes da animação (antes de cada nova reprodução), e então a animação será reproduzida por 6 segundos:

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

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

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemplo . Possíveis problemas

Uma animação, escrita na forma abreviada, pode não funcionar devido ao seu nome. Vamos considerar a seguinte animação:

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

Observe, estou usando o nome de animação reverse. À primeira vista, tudo está bem, mas a animação não funciona, porque reverse é uma palavra-chave válida para a propriedade animation-direction.

A animação também não funcionará ao usar na forma abreviada no nome outras palavras-chave. Mas tudo funciona bem ao usar a forma "completa" de descrição.

Entre as palavras-chave de valor animation-direction que quebram as animações, devem ser consideradas também as palavras-chave relacionadas às funções de easing, assim como infinite, alternate, running, paused e assim por diante.

Veja também

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