Animação em CSS3

Em alguns tutoriais anteriores trabalhamos com animações em css3 usando os atributos transform e transition. Se você acha que o já produziu é legal, espere até o fim desse tutorial!

As verdadeiras animações em CSS são na verdade um projeto da equipe Webkit (o pessoal que desenvolve o Safari, da Apple) que foi levado como uma proposta para a W3C e está sendo suportada pela maioria dos navegadores.

Ao contrário de Transitions e Transforms, para as Animations você deverá criar uma função que agirá de acordo com o objeto a ser animado. Essa função será então chamada nas classe, com a definição de um tempo de duração, forma de entrada.

Essas funções são chamadas de keyframes e são na verdade uma regra CSS especializada. São semelhantes a uma declaração CSS comum, mas permitem a identificação através de um nome e aplicação de regras – como o tempo de duração, conforme explicado acima.
Para fazer mais sentido, vamos ao exemplo.

Crie uma página qualquer e insira uma imagem de coração. Nós faremos esse coração pulsar!

Para que o coração tenha o efeito de pulsação, seu tamanho deverá variar em relação ao tempo. Para manipular esse tamanho trabalharei com o atributo transform:scale(x), aonde x é o valor, em porcentagem, do tamanho do coração em relação ao seu tamanho real.

Para criar uma keyframe dividiremos em %, aonde em cada % uma ação deverá ser realizada. No caso, meu coração terá o scale inicial de 0.8, passará para 1.0, irá para para 1.2, e retornará para 1.0 e assim, para 0.8. Dessa forma, dividi minha escala em 5 tempos – mas você pode dividi-la em quantos forem necessários. O keyframe final é:

[code language=”css”] @-moz-keyframes pulsar {
0% {
-moz-transform: scale(0.8);
}
25% {
-moz-transform: scale(1);
}
50% {
-moz-transform: scale(1.2);
}
75% {
-moz-transform: scale(1);
}
100% {
-moz-transform: scale(0.8);
}

}
[/code]

Nesse exemplo estou trabalhando com o prefixo -moz, porque estou testando no firefox, mas lembre-se de implementar os mais comuns (-webkit, -o). Repare que eu dei um nome para minha função: pulsar. Agora trabalharemos na chamada desse keyframe na imagem.

No meu código html, inseri a imagem de coração da seguinte maneira:

[code language=”html”]
[/code]

Vamos implementar uma classe para coracao e definir a animacao dentro dela. Uma animação tem quatro atributos:

• animation-name:  É o nome da sua animação, no caso, o nome do keyframe que criamos anteriormente (pulsar);

• animation-duration: É a definição do tempo de duração da sua animação –  quanto tempo o processo vai levar para ir do passo de 0% do keyframe ao passo 100%. No exemplo do coração defini esse tempo para 2s. Lembre-se que esse tempo diz respeito a duração da animação em si, e não de quantas vezes ela deverá se repetir – portanto, se você colocar um valor muito alto, sua animação ocorrerá lentamente e será praticamente imperceptível.

• animation-iteration-count: Define o número de vezes que animação irá ocorrer. No nosso caso, o valor será infinite, ou seja, não existe um valor máximo de vezes que o coração deverá pulsar.

• animation-timing-function: Define uma das transições para a imagem, ou seja, a forma que ela deverá “aparecer na tela”. Para saber mais sobre transições, leia o post: Trabalhando com transições em CSS3. Para o nosso exemplo o valor ease-in-out.

Assim, a classe definida será:
[code language=”css”] #coracao {
-webkit-animation: pulsar 2s infinite ease-in-out;
-moz-animation: pulsar 2s infinite ease-in-out;
}
[/code]

Salve o que foi feito até aqui e abra a página em seu navegador. O coração irá pulsar!

Para enfatizar o que foi feito, vamos criar outro objeto. Escolha um desenho de um sol. Faremos ele girar na tela.

Agora trabalharemos com o transform do tipo rotate, ou seja,  nosso objeto sofrerá uma rotação ao redor do seu próprio eixo. A keyframe definida aqui foi:

[code language=”css”] @-moz-keyframes girar {
100% {
-moz-transform: rotate(360deg);
}
}
[/code]

Note que o que foi feito aqui é dizer que ao final de um tempo X, que será definido na classe, o objeto deverá ter realizado um giro de 360 graus em torno do seu eixo. Para a classe do sol, tenho:
[code language=”css”] #sol {
-webkit-animation: girar 120s infinite ease-in-out;
-moz-animation: girar 5s infinite ease-in-out;
}
[/code]

Use sua criatividade a mãos a obra!
Para baixar os arquivos desse tutorial, clique aqui!

---

// Comente!

comentários