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