No presente exercício vamos ver como podemos animar um desenho com CSS 3 em vários pontos, que nos darão uma ideia global das possibilidades das animações CSS E que nos oferecerá uma prática completa das técnicas que vimos até o momento.

Em relação às animações de objetos com CSS já vimos alguns exemplos interessantes com técnicas que vamos utilizar neste artigo. Os exemplos vistos até agora são a animação de texto, o fundo de tipo Matrix e o fundo com os flocos de neve. Neste artigo vamos misturar tudo e realizar um desenho com distintas animações.

Se você desejar, pode começar vendo o resultado final deste exemplo. Mas observe que no momento funciona apenas com Chorme ou Safari.

Para a realização desta prática, o primeiro que vamos fazer é criar um fundo simples para nossa animação. Algo como isto:

A continuação, vamos criar uma nuvem que se vai movendo pelo céu de nosso desenho.

Uma vez que tenhamos a nuvem, colocamos em nosso arquivo CSS o seguinte código:

@-webkit-keyframes nuvem {

from {
left: 100px;
opacity: 1;

}

to {
left: 300px;
opacity: 0;
}

}

#nuvem{
position:relative;
-webkit-animation-name: nuvem;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in;
}

Sobre o fotograma- chave não há muito que comentar, simplesmente vai de 100px a 300px e vai perdendo opacidade, ou seja, vai ficando mais transparente à medida que se move para a direita , o que faz com que vá desaparecendo de nosso desenho.
Quanto à animação, é mais ou menos o mesmo, dura 3 segundos e vai e volta à sua posição inicial.

Agora vamos animar a árvore para que vejamos como caem suas folhas. Para isso, criamos uma folha e colocamos o seguinte código em nosso CSS:

@-webkit-keyframes folhas{
   from {
      top: 150px;
      opacity: 1;
   }
   to {
      top: 400px;
      opacity: 0;
   }
}
@-webkit-keyframes folha{
   0% { -webkit-transform: rotate(-180deg) translate(0px, 0px);}
   100% { -webkit-transform: rotate(180deg) translate(10px, 75px);}
}

#folha div {
   position: absolute;
   top: -40px;
   -webkit-animation-name: folha, folhas;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: normal;
   -webkit-animation-timing-function: ease-in;
}
.folhas {   
   position: absolute;   
}
.folhas.f1 {
   left: 40px;
   -webkit-animation-duration: 5s;   
}
.folhas.f2 {
   font-size: 1.8em;
   left: 100px;
   -webkit-animation-duration: 7s;   
}

Como podem ver temos dois fotogramas chave: um que nos diz como vão se mover todas as folhas que caem da árvore e outro que nos diz o movimento que cada folha vai realizar por separado.

Depois fomos dando propriedades às folhas, com propriedades gerais definidas no DIV folha e depois propriedades específicas para cada folha. Creio que não é necessário explicá-las porque foram todas vistas em artigos anteriores do nosso manual de CSS 3.

E por último falta a animação que colocamos do boneco . Para isso, realizamos um desenho com o tronco, as pernas e a cabeça e depois desenhamos os braços por separado que são os que se vão mover. Esta é a animação mais complicada já que fazer encaixar os braços com o tronco e conseguir o movimento adequado resultou um pouco trabalhoso e ainda assim acabou não saindo perfeito. Seu código CSS é o seguinte:

@-webkit-keyframes mao2 {
   0% {   
      -webkit-transform: rotate(0deg) translate(0px,0px);
   }
   100% {
      -webkit-transform: rotate(-60deg) translate(0px,0px);   
   }
}

#maodireita{
   position: absolute;
   top:250px;
   left:279px;
   width:-10px;
}

#maoesquerda{
   position: absolute;
   top:250px;
   left:340px;
   width:8px;
   -webkit-animation-name: mao2;
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
}

Isto o que faz é deixar a mão direita fixa e a esquerda nos saudando. Tudo isto utilizando as propriedades já vistas.

Com isto terminamos nosso código CSS para as animações e nos falta um estilo mais para nosso exemplo.

#container{      
   background: #666 url(images/fundo-boneco2.jpg) no-repeat;
   width: 600px;
   height: 400px;      
   position: relative;   
}

#situacao {
   width: 200px;
   position: absolute;
   left: 300px;
   top: 200px;
}

Um para as propriedades do desenho em geral e o de situação para colocar o boneco na posição desejada.

Agora só nos falta o código HTML que é o seguinte:

<!DOCTYPE html>
<html>

<head>
   
   <title>Desenho animado CSS 3</title>
<link rel="stylesheet" href="boneco.css" type="text/css">
   

</head>

<body>

   <div id=container>
      <div id="nuvem"><img src="images/nuvem2.png" alt="" border="0"></div>
      <div id="situacao"><img src="images/tronco-boneco2.png" alt="" border="0"></div>
      <div id="maoesquerda"><img src="images/mao-esquerda.png" alt="" border="0"></div>
      <div id="maodireita"><img src="images/mao-direita.png" alt="" border="0"></div>
      <div id="folha" class="folha">   
         <div class="folhas f1"><img src="images/folha.png" alt="" border="0"></div>
         <div class="folhas f2"><img src="images/folha.png" alt="" border="0"></div>
      </div>
    </div>


   </body>
</html>

Tudo vai dentro de nosso DIV container e depois cada animação dentro de um DIV. Outra coisa a destacar é que há tantos DIV folhas f1 como folhas queiramos que caiam, no nosso caso 2, mas poderia haver mais se quiséssemos.

Agora só falta ver novamente nosso exemplo funcionando.