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 Arrigoni



Olá 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>
Mostra o resultado do código da Listagem 2

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>
Resultado do código da Listagem 3

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>
Resultado do código da listagem 4.

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

Ricardo Arrigoni - Desenvolvedor Front-End, Analista SEO, Atuo na área de Webdesign há mais de 4 anos. Para trabalhos freelancers visite meu portfólio: www.ricardoarrigoni.com.br ou se preferir me mande um e-mail.