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!!!

Um adeus

Me olhou como se estivesse me dizendo adeus

mas não podia dizer palavra alguma

E eu me senti tão inútil

Tão pequeno, sem poder fazer nada

Foi difícil não chorar

Mas você ficou tão quieta

como se ansiasse o que o destino lhe preparava

Com seus olhos, me disse que descansaria, enfim.

Que não sofreria mais

E viveria eterna em nossas memórias.

Adeus, Pituquinha.

Pituquinha

Escolheram me fazer esperar

Após alguns anos, acabei percebendo que elas, as malvadas, escolheram me fazer esperar. Eu sou o urso da foto.

Senta aqui nesse banco, pertinho de mim, vamos conversar!

Como vocês sabem, a crise mundial global chegou ao nosso país, e isso não tem nada a ver com o assunto desse texto. Mentira, tem sim. É que eu queria comparar essa crise mundial com minha crise sentimental, só pra dar mais sustância pro post, pra parecer que eu sou uma pessoa muito bem informada.

Sinceramente, preferia não saber de muita coisa que vem acontecendo atualmente no país, já que elas não estão nada boa, mas isso fica prum próximo texto.

E na verdade, após esses anos que citei no início do texto, já estou meio que conformado em estar só. Não estou mais a procura de alguém para ter ao meu lado, nem na frente, muito menos atrás. Sei que em algum momento, o relógio estará marcando uma hora, de acordo com o horário de Brasília, e aparecerá a mulher certa para mim.

Há pessoas que dizem que isso não existe. Que temos que ir "experimentando" até encontrar a "melhor" pessoa. Não penso assim. Ao se relacionar com outras pessoas, estamos falando de sentimentos, de vidas, pensamentos, histórias, estórias, etc. Não dá pra simplesmente "testar" alguém, já que na qualidade de "alguém", essa pessoa não é um objeto. Sei que hoje em dia está tudo banalizado. Infelizmente, as pessoas não ligam mesmo para o que o outro está sentindo, mas não podemos ser assim.

Não digo aqui que devamos nos importar com todo mundo, senão ficaríamos loucos! Mas, pelo menos, com as pessoas próximas, sim. Com essas, temos que tomar todo o cuidado para não magoá-las. Tanto para amigos, como para o(a) futuro(a) namorado(a). Ou até mesmo com os diversos contatos que temos ao longo do dia. Devemos ter, no mínimo, respeito com o próximo em qualquer situação.

E se não fui eu que decidi esperar, foram elas, ou foi "ela", minha futura companheira, que assim o decidiu. Pra falar a verdade, nem ela própria. Eu acredito que Deus esteja nos preparando. Se ainda não nos encontramos, Ele dará um jeito para que isso aconteça. Se já nos vimos, mas não nos vimos, nos veremos um dia (naquela hora marcada, no horário de Brasília).

Sei que talvez esse texto pareça um pouco bobinho, ainda mais com essas brincadeiras gratuitas que faço no meio do texto. É que não quero que pareça um texto dramático, porque não é esse meu objetivo. Meu objetivo é dizer que, compreendendo como as coisas funcionam, eu não preciso me preocupar ou ansiar tanto por algo que Deus está planejando pra mim.

Mas como você pode ter tanta certeza assim, caro escritor? Como? Pela fé!! Quantas histórias não vemos por aí de um japonês que conheceu misteriosamente uma chinesa num shopping lá em Brasília, sendo que ele deveria estar em Tóquio e ela, em Madri?! Coisas que parecem coincidências nem sempre são simples obras do acaso.

E por que eu escrevi sobre isso? Porque eu estava tomando banho, pensando na vida, nas aulas de baixo e de repente me veio esse pensamento: "escolheram me fazer esperar", parodiando aquele movimento de 2011: "Eu escolhi esperar". Primeiro, eu ri, depois chorei. Depois, pensei em escrever algo engraçado aqui no blog, mas não ficou tão engraçado assim. Vocês viram como surgem os textos daqui, né?! Tomando banho, ou indo pr'aquela universidade maravilhosa que é a Unioeste. Falando nisso, as aulas voltaram semana passada. Mais precisamente, na terça-feira. Fui o caminho todo pensando em escrever algo bonito, fazendo um paralelo com meu primeiro dia de aula na pré, na primeira série, na quinta série (quando mudei de colégio). Mas esse pensamento foi pra China logo depois que tive a primeira aula no mestrado. Que aula chata. O professor até falou numa teoria da conspiração...

Bom, mas vou parar por aqui. Depois conversamos mais! Até!!