Desenho animado com CSS 3

Prática geral sobre diferentes técnicas de animação CSS, na que realizamos um desenho animado por vários elementos que têm diferentes particularidades.

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.

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.

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.

Essa foi mais tutorial de CSS3, até a próxima!

Fonte: http://www.criarweb.com/artigos/desenho-animado-css3.html

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s