Desenvolvimento - CSS
CSS3 Animations: Criando animações com CSS
Veja nesse artigo como criar diferentes tipos de animações utilizando apenas html e css.
por Ricardo ArrigoniOlá pessoal, antes de irmos direto ao ponto, nesse artigo vamos começar com pequenas noções básicas de animações CSS3. Como todos sabemos, a animação é uma nova propriedade CSS que permite a animar a maioria dos elementos HTML (como div, h1 e span) sem JavaScript ou Flash. Os usuários podem alterar os estilos como eles quiserem e quantas vezes quiserem. A única coisa que precisa ser feita é o de especificar quando a mudança ocorrerá em por cento, que é o mesmo como 0% e 100%. Em termos simples, 0% é o início da animação, 100% é quando a animação é completa.
A chave para criar animações em CSS3 é regra @keyframes. Nesta regra, a animação é criada. Assim, o usuário precisa especificar um estilo CSS dentro da regra @keyframes e a animação irá mudar gradualmente a partir do estilo atual para o novo estilo.
Nota: Para a atenção dos usuários, regra @keyframes ou da propriedade de animação não é suportada pelo Internet Explorer até a data da criação desse artigo.
Para utilizar essa propriedade em outros navegadores, é preciso adicionar um prefixo. Firefox exige o prefixo-moz-, Chrome e Safari exigem o prefixo-webkit-, e Opera requerem o prefixo-o-, entre outros.
Listagem 1: Exibe o código para adicionar o prefixo em navegadores diferentes
@keyframes aprendendoCSS3animation
{
from {background: blue;}
to {background: grey;}
}
@-moz-keyframes aprendendoCSS3animation /* Firefox */
{
from {background: blue;}
to {background: grey;}
}
@-webkit-keyframes aprendendoCSS3animation /* Safari e Chrome */
{
from {background: blue;}
to {background: grey;}
}
@-o-keyframes aprendendoCSS3animation /* Opera */
{
from {background: blue;}
to {background: grey;}
}
Agora, quando a animação é criada pelo usuário usando a regra @keyframes, as animações criadas devem se linkar para o seletor. Se a animação não for linkada, então ela não vai mostrar resultado nenhum, ou seja, nenhuma animação será feita. Nesse processo, o usuário precisa definir duas propriedades diferentes. Estas propriedades podem ser qualquer coisa, mas, neste artigo iremos definir as duas propriedades mais importantes isto é, o nome da animação e a duração da animação.
Nota: A duração da animação deve ser definida pelo usuário, pois se o usuário não fornecer a duração, a animação não vai funcionar, porque o valor padrão será zero nesse caso.
Agora, vamos criar uma animação muito simples. Neste, estamos linkando o elemento "aprendendoCSS3animation" a um elemento div e, em seguida, fornecer a duração da animação.
Listagem 2: Exibe o código para linkar o elemento à animação e para fornecer a duração da animação
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:1000px;
height:500px;
background:blue;
animation:aprendendoCSS3animation 10s;
-moz-animation:aprendendoCSS3animation 10s; /* Firefox */
-webkit-animation:aprendendoCSS3animation 10s; /* Safari e Chrome */
-o-animation:aprendendoCSS3animation 10s; /* Opera */
}
@keyframes aprendendoCSS3animation
{
from {background:blue;}
to {background:grey;}
}
@-moz-keyframes aprendendoCSS3animation /* Firefox */
{
from {background:blue;}
to {background:grey;}
}
@-webkit-keyframes aprendendoCSS3animation /* Safari e Chrome */
{
from {background:blue;}
to {background:grey;}
}
@-o-keyframes aprendendoCSS3animation /* Opera */
{
from {background:blue;}
to {background:grey;}
}
</style>
</head>
<body>
<p><strong>Nota:</strong> Infelizmente o exemplo citado não funciona no Internet Explorer</p>
<div></div>
</body>
</html>
Figura 1: Mostra o resultado do código da Listagem 2
Agora, também pode alterar as cores diferentes quando a animação está sendo executada. Por exemplo, a animação muda de cor após os intervalos regulares de tempo, ou seja, a 25% de um determinado tempo, 50% do tempo e deu 75% de um dado tempo e, finalmente, 100% de um dado tempo.
Listagem 3: Mostra o código para executar o que falamos acima
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:200px;
height:100px;
background:blue;
animation:aprendendoCSS3animation 20s;
-moz-animation:aprendendoCSS3animation 20s; /* Firefox */
-webkit-animation:aprendendoCSS3animation 20s; /* Safari e Chrome */
-o-animation:aprendendoCSS3animation 20s; /* Opera */
}
@keyframes myfirst
{
0% {background:blue;}
25% {background:black;}
50% {background:purple;}
75% {background:green;}
100% {background:grey;}
}
@-moz-keyframes aprendendoCSS3animation /* Firefox */
{
0% {background:blue;}
25% {background:black;}
50% {background:purple;}
75% {background:green;}
100% {background:grey;}
}
@-webkit-keyframes aprendendoCSS3animation /* Safari e Chrome */
{
0% {background:blue;}
25% {background:black;}
50% {background:purple;}
75% {background:green;}
100% {background:grey;}
}
@-o-keyframes aprendendoCSS3animation /* Opera */
{
0% {background:blue;}
25% {background:black;}
50% {background:purple;}
75% {background:green;}
100% {background:grey;}
}
</style>
</head>
<body>
<p><strong>Nota 1:</strong> Infelizmente o exemplo citado não funciona no Internet Explorer</p>
<p><strong>Nota 2:</strong> Quando a animação estiver finalizada, irá voltar ao estado original incial. </p>
<div></div>
</body>
</html>
Figura 2: Resultado do código da Listagem 3
Agora, nós também podemos fazer o movimento de animação em locais diferentes e em momentos diferentes, como mostra o código a seguir.
Listagem 4: Exibe o código para mover a animação
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
div
{
width:150px;
height:100px;
background:blue;
position:relative;
animation:aprendendoCSS3animation 25s;
-moz-animation:aprendendoCSS3animation 25s; /* Firefox */
-webkit-animation:aprendendoCSS3animation 25s; /* Safari e Chrome */
-o-animation:aprendendoCSS3animation 25s; /* Opera */
}
@keyframes aprendendoCSS3animation
{
0% {background:blue; left:0px; top:0px;}
25% {background:black; left:250px; top:0px;}
50% {background:purple; left:250px; top:250px;}
75% {background:green; left:0px; top:250px;}
100% {background:grey; left:0px; top:0px;}
}
@-moz-keyframes aprendendoCSS3animation /* Firefox */
{
0% {background:blue; left:0px; top:0px;}
25% {background:black; left:250px; top:0px;}
50% {background:purple; left:250px; top:250px;}
75% {background:green; left:0px; top:250px;}
100% {background:grey; left:0px; top:0px;}
}
@-webkit-keyframes aprendendoCSS3animation /* Safari e Chrome */
{
0% {background:blue; left:0px; top:0px;}
25% {background:black; left:250px; top:0px;}
50% {background:purple; left:250px; top:250px;}
75% {background:green; left:0px; top:250px;}
100% {background:grey; left:0px; top:0px;}
}
@-o-keyframes aprendendoCSS3animation /* Opera */
{
0% {background:blue; left:0px; top:0px;}
25% {background:black; left:250px; top:0px;}
50% {background:purple; left:250px; top:250px;}
75% {background:green; left:0px; top:250px;}
100% {background:grey; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><strong>Nota 1:</strong> Infelizmente o exemplo citado não funciona no Internet Explorer</p>
<p><strong>Nota 2:</strong> Quando a animação estiver finalizada, irá voltar ao estado original incial. </p>
<div></div>
</body>
</html>
Figura 3: Resultado do código da listagem 4.
Conclusão
Nesse artigo vimos como funcionam as animações criadas com CSS3. Infelizmente até a data em que esse artigo foi escrito, o Internet Explorer não possui suporte à essas funcionalidades, espero que com a evolução dos navegadores, a Microsoft faça com que o IE passe a ser compatível com todas as novidades.
Espero que tenham gostado e até o próximo artigo.
Ricardo Arrigoni - Especialista em SEO com mais de 7 anos de experiência. Para consultorias em SEO visite meu site: www.ricardoarrigoni.com.
