Neste artigo, vamos aprender como fazer lindas animações apenas com o CSS animation, sem a necessidade de JavaScript. Vamos começar?

Propriedades:

@keyframes

A princípio, propriedade keyframes é responsável por gerir o nome da nossa animação, e também todas as regras CSS que desejarmos aplicar para que a animação ocorra.

@keyframes exemple {
	from {
		// aqui definimos como nossa animação vai comecar
	} to {
		// e aqui como ela terminará 
	}
}

Como podemos observar, dentro do bloco do keyframes temos o início da animação from e o término da mesma to. Então surge a pergunta: como podemos fazer uma animação exatamente na metade do percurso, Já que só temos o início e o fim? A resposta é bastante simples, vamos ao exemplo:

@keyframes example {
	0% {
		// aqui é o inicio da nossa animação
	} 50% {
		// aqui é você descreve o que acontecerá em 50% 
	} 100% {
		// fim da animação
	}
}

Os valores acima definem exatamente o início, meio e fim da nossa animação; Estes valores vão de 0% (sendo o início) a 100% (o fim), e o uso dos valores varia de acordo com a animação que você queira criar.

Além disso, as propriedades abaixo tem que ser definidas no componente HTML que você quer animar.

animation-name

Esta propriedade é usada no componente no qual você quer animar, por exemplo:

.div-animada {
	animation-name: example;
}
// esta div passará a ser animada por exemple

animation-duration

O nome também é inconfundível, serve para você definir o tempo em segundos para sua animação.

.div-animada {
	animation-name: example;
	animation-duration: 1s;
}
// esta animação terá um tempo total de 1 segundo

anmation-delay

Às vezes, você quer animar mais de um componente do HTML e quer que eles comecem a animação em tempos diferentes, por exemplo: um começa imediatamente após carregar a página – neste você não define o delay, pois não precisa. Contudo, vamos supor que você queira que o outro demore 0.5 segundos a mais pra começar; nesse caso, você usa o delay:

.div-animada {
	animation-name: example;
	animation-duration: 1s;
}

.div-animada-2 {
	animation-name: example;
	animation-duration: 1s;
	animation-delay: 0.5s;
}
// A div-animada-2 demorara 0.5 segundos para começar a animação.

animation-iteration-count

Esta propriedade define quantas vezes uma animação acontecerá. Para este exemplo vou deixar um código CSS pronto para você copiar, testar e modificar, para que você entenda melhor os conceitos.

Dessa forma você pode definir um número de vezes específico como está definido no exemplo, ou pode dizer para sua animação que ela aconteça infinitamente usando “infinite” no lugar do número.

<!DOCTYPE html>
<html>
<head>
<style>

/*div que vai ser animada*/ 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: 2;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>

</body>
</html>

animation-direction

Esta propriedade é bem interessante! Com ela, você pode fazer com que sua animação aconteça de trás para frente se assim desejar; dentro desta propriedade temos 4 opções de direção possíveis:

  • normal – A animação é reproduzida para frente, este é o padrão;
  • reverse – Esta por sua vez é reproduzida de trás para frente, na direção reversa;
  • alternate – A animação é reproduzida para frente inicialmente, depois para trás;
  • alternate-reverse – Analogamente a alternate a animação começa de trás para frete e vai alternando.
<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 2s;
  animation-direction: alternate-reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>

</body>
</html>

animation-timing-function

Esta propriedade especifica a curva de velocidade da animação. Vamos ver os valores que ela pode receber?

  • ease – A animação começa lenta, mais ou menos no meio ela fica rápida e quando vai chegando perto do fim, a animação fica lenta de novo. Este é o padrão!
  • linear – A animação acontece numa mesma velocidade do início ao fim.
  • ease-in – A animação começa lentamente e acaba rápida.
  • ease-out – A animação começa rápida e acaba devagar.
  • ease-in-out – A animação terá um início e fim lentos.
<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s infinite;
}

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>
Animação css
Animações com diferentes velocidades.

animation-fill-mode

Esta propriedade define como a animação aplicará os estilos que você definiu. “Como assim?”, você pode perguntar… Por exemplo, se você quer que quando sua página carregue, seu elemento não esteja visível mas ele ainda assim está aparecendo e depois ele some e faz a animação, você pode usar o animation-fill-mode para resolver seu problema.

  • forwards → Faz com que o componente adquira os valores do ultimo quadro-chave, quando a animação termina.
  • backwards → Faz com que o componente obtenha os valores de estilo definidos pelo primeiro quadro-chave, ou seja antes do início da animação.
  • both → Faz a mesma coisa que o backwards porém, ele também retém os valores do último quadro-chave da animação, ou seja quando a animação termina.
<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: backwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<div></div>

<p><strong>Note:</strong> The animation-fill-mode property is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Conclusão

Dessa forma, nós aprendemos como criar animações apenas com CSS, vou deixar alguns links de referencia para vocês se aprimorarem.

w3schools – CSS Animation
MDN – CSS Animation