Para criar uma animação desse tipo, é preciso primeiro defini-la (usando a keyword @keyframes e dando um nome para a animação) e depois ativá-la (usando algumas propriedades).

Exemplo:

Usar as keywords from e to é o jeito mais simples de se definir uma animação (possui somente 2 passos).

Os valores das propriedades definidos na especificação da animação só são aplicados durante a animação.

Para definir animações mais detalhadas, pode-se usar porcentagens para especificar o que ocorre e quando. Exemplo:

@keyframes colors {
	0% {
		background-color: pink;
	}
	50% {
		background-color: plum;
	}
	100% {
		background-color: purple;
	}
}

Descrições das propriedades:

• animation-name: recebe como parâmetro o nome da animação a ser ativada.
• animation-duration: permite definir a duração total da animação.
• animation-iteration-count: define o número de vezes que uma animação vai acontecer. A keyword infinite faz com que ela se repita infinitamente.
• animation-direction: permite especificar se uma animação deve ocorrer em ordem, na ordem reversa, de maneira alternada, …
• animation-delay: estabelece um delay para que a animação comece.
• animation-timing-function: especifica uma função que determina a taxa na qual a animação acontece (linear, ease-in-out, ease-in, ease-out, ...).
• animation-fill-mode: define como uma animação aplica estilos ao seu alvo antes e depois da sua execução.
  • forwards: o elemento continua com os estilos aplicados ao final da animação.
  • backwards: os estilos do primeiro keyframe relevante serão aplicados assim que ele for aplicado ao elemento alvo e se manterão durante o período do delay.
  • both: combinação dos efeitos de forwards e backwards.

É possível usar a propriedade shorthand animation para simplificar o uso das propriedades acima. Detalhes de sintaxe podem ser encontrados em: