Animação em CSS

Neste tutorial, mostraremos como é simples fazer animação em CSS com os atributos animation e @keyframes.

Como criar animação em CSS

Usaremos como base a imagem acima. Para composição dela, criaremos o céu, chão e Sol apenas com CSS. Exportaremos imagens no formato png do trem, avião e nuvens.

Primeiramente, vamos construir o ambiente. O código ficará da seguinte maneira:

HTML/CSS

<div id="container">
<div id="sol"></div>
<div id="grama"></div>
</div>

<style>
#container {
position: relative;
width: 650px;
height: 400px;
overflow: hidden;
background: blue;
}
#grama{
position: absolute;
bottom: 0;
width: 100%;
height: 140px;
background: url('link-da-imagem.png');
}
#sol {
border-radius: 50%;
background: yellow;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
right: 60px;
}
</style>

Resultado

Animation e @Keyframes

Agora que criamos esse cenário simples, vamos para a animação dele. Podemos animar o Sol e mudar a cor do céu. Para isso. criamos uma @keyframes, a nomeamos e damos alguns valores a suas variáveis. Veja o código abaixo:

CSS

@keyframes ceu {
0% {background: blue;}
50% {background: black;}
100% {background: blue;}
}
@-webkit-keyframes ceu {
0% {background: blue;}
50% {background: black;}
100% {background: blue;}
}

No exemplo acima, chamamos a @keyframes, a nomeamos de ceu e artribuimos valores diferentes ao background. A porcentagem (0%, 50% e 100%) indicam o andamento da animação no início,  meio e fim. É possível atribuir várias porcentagens entre 0 e 100%.

Com isto feito, devemos agora pôr ela para funcionar em determinado elemento. Como vamos alterar a cor do céu de azul para preto, inseriremos o animation no CSS #container:

CSS

#container {
position: relative;
width: 650px;
height: 400px;
overflow: hidden;
background: blue;
animation: ceu 20s linear infinite;
-webkit-animation: ceu 20s linear infinite;
}

Repare que os atributos de animation segue a ordem: nome (ceu), tempo (20s), tipo de animação (linear) e quantas vezes ela ocorrerá (infinite). Com isso, temos o seguinte resultado.

Resultado

Agora vamos animar o Sol, fazendo ele aparecer de dia e desaparecer de noite. Pra isso, usaremos várias porcentagens. Veja:

CSS

#sol {
animation: sol 30s ease infinite;
-webkit-animation: sol 30s ease infinite;
}
@keyframes sol {
0% {top: 50px;}
45% {top: 50px;}
50% {top: 350px;}
95% {top: 350px;}
100% {top: 50px;}
}
@-webkit-keyframes sol {
0% {top: 50px;}
45% {top: 50px;}
50% {top: 350px;}
95% {top: 350px;}
100% {top: 50px;}
}

Repare que entre o 0% e 45%, o Sol ficará imóvel, mas dos 45% aos 50% ele terá uma nova posição. Note também que a animação não está linear, mas sim no modo ease, o que torna mais suave o início e fim de cada movimento. O resultado será esse:

Resultado

Inserindo imagens

Agora, vamos trabalhar com imagens. É possível inseri-las tanto por img, como por background. Isso fica ao seu critério. Vamos animar um trem, fazendo com que ele surja da esquerda e desapareça na direita. Veja como é simples:

Caso queira baixar as imagens usadas nesse tutorial, clique aqui!

HTML/CSS

<div id="container">
<div id="sol"></div>
<div id="grama"></div>
<div id="trem"></div>
</div>
<style>
#trem{
position: absolute;
bottom: 10px;
width: 100%;
height: 130px;
background-position: -2100px 0;
background-image: url('link-da-imagem.png');
background-repeat: no-repeat;
animation: train 12s linear infinite;
-webkit-animation: train 12s linear infinite;
}
@keyframes train {
from { background-position: -2100px 0;}
to {background-position: 1500px 0;}
}
@-webkit-keyframes train {
from { background-position: -2100px 0;}
to {background-position: 1500px 0;}
}
</style>

Quando a animação necessitar apenas de dois movimentos, pode-se usar o from (de) e o to (para). Como a imagem do trem é muito larga, para ela ficar fora do campo de visão, a posição inicial dela é de -2100px e a final, 1500px. Veja o resultado:

Resultado

Agora, vamos inserir uma nuvem e um avião. Repare que para o avião, usaremos o img e alteraremos duas propriedades dele para fazer a animação. É possível alterar várias propriedades em uma mesma animação. Basta usar a criatividade:

HTML/CSS

<div id="container">
<div id="nuvem"></div>
<div id="sol"></div>
<div id="grama"></div>
<div id="aviao">
<img  src="link-da-imagem-animacao-aviao.png" />
</div>
<div id="trem"></div>
</div>
<style>
#aviao{
position: absolute;
bottom: 100px;
width: 200px;
animation: voar 7s ease-in infinite;
-webkit-animation: voar 7s ease-in infinite;
}
#aviao img {
width: 200px;
}
@keyframes voar {
from { left: 700px; bottom: 100px;}
to { left: -500px; bottom: 190px;}
}
@-webkit-keyframes voar {
from { left: 700px; bottom: 100px;}
to { left: -500px; bottom: 190px;}
}
#nuvem {
position: absolute;
width: 100%;
height: 400px;
background: url('link-da-imagem-animacao-nuvem.png') no-repeat;
animation: nuvem 200s linear infinite;
-webkit-animation: nuvem 200s linear infinite;
}
@keyframes nuvem {
0% {background-position: -300px;}
100% {background-position: 1000px;}
}
@-webkit-keyframes nuvem {
0% {background-position: -300px;}
100% {background-position: 1000px;}
}
</style>

Resultado

Conclusão

Com o uso de animation e @keyframes, é possível fazer animações incríveis, sem precisar usar o flash. Ainda há muito mais para se fazer. Como esse código ainda está em desenvolvimento, é necessário usar o -webkit-. Curiosamente, em praticamente todos os navegadores, esse código funcionou bem. Porém, para o Google Chrome, foi necessário incluir o webkit.

E aí, gostou do código? Sabe mais algum? Comente aí! Até a próxima!

Gostou do post

Então, curta nossa página

e comente!!!