Animações com CSS3

1 de mar de 2013 - Paulo Dias


O CSS3 traz varias possibilidades de animações. Animações que antes envolveriam toda uma lógica de programação e algumas(ou muitas) linhas de código Javascript podem agora ser feitas apenas com CSS. Um exemplo disso é a pequena animação de aumentar uma imagem quando o mouse é colocado sobre ela. Isso já era possível apenas com o :hover, mas a idéia é que ela aumente aos poucos e não tudo de uma vez só. Na verdade, é algo bem simples, mas que até a chegada do CSS3 só era possível com Javascript. Veja um exemplo de como fazer essa animação apenas com CSS3:

#ex-css-img1 { 
       width: 120px;
       transition: width 2s;         /* padrão */
       -moz-transition: width 2s;    /* Firefox */
       -webkit-transition: width 2s; /* Safari and Chrome */ 
       -o-transition: width 2s;      /* Opera */ 
 } 

 #ex-css-img1:hover {
       width: 190px; 
 }

Veja a simplicidade do código, basicamente usei a propriedade "transition" para amenizar a alteração que ocorre na propriedade "width" quando o mouse fica por cima da imagem(hover). Perceba que sem a propriedade "transition" o tamanho da imagem aumenta rápidamente sem produzir a animação esperada:

Obs. no exemplo, não utilizei todas as possibilidades da propriedade "transition", nesses casos é assumido o valo padrão.

A sintaxe da propriedade "transition" é :
transition: property duration timing-function delay;

onde:

property: A propriedade que será alterada durante a animação
duration: O tempo até que a animação termine
timing-function: A forma de execução da animação. Alguns valores suportados são: linear, ease, ease-in, ease-out...
delay: O tempo antes que a animação inicie

veja mais sobre essa propriedade aqui

Outra propriedade que simplifica e muito as animações com CSS3 é a "transform", veja alguns exemplos:


A propriedade "transform" tem a seguinte sintaxe:

transform: function;
Onde:

"function": É uma das muitas funções que essa propriedade suporta. Por exemplo nas animações acima usei respectivamente: transform: rotate( 180deg ), transform: rotateX( 180deg ) e transform: rotateY( 180deg ). Veja mais sobre a propriedade "transform" e suas funções aqui

Para obter resultados mais elaborados é possível especificar mais de uma propriedade para a "transition", por exemplo:

#ex-css-img7 {
     transition-property: transform, border-radius; 
     transition-duration: 1s;
     -moz-transition-property: transform, border-radius; 
     -moz-transition-duration: 1s;
     -webkit-transition-property: transform, border-radius; 
     -webkit-transition-duration: 1s;
     -o-transition-property: transform, border-radius; 
     -o-transition-duration: 1s;
 } 

#ex-css-img7:hover{
     transform: rotate( 360deg );
     -moz-transform: rotate( 360deg );
     -webkit-transform: rotate( 360deg );
     -o-transform: rotate( 360deg );
     border-radius: 100px;
     -moz-border-radius: 100px;
     -webkit-border-radius: 100px;
     -o-border-radius: 100px;
}


Obs. Nesse exemplo usei a "transition" especificando cada possibilidade em uma propriedade diferente. ( da mesma forma que acontecia no CSS2, por exemplo: margim: top right bottom left; ou margin-top:, margim-right:, margin-bottom: e margin-left: )

Além das propriedades "transition" e "transform" o CSS3 também disponibiliza as propriedades "animation" e "@keyframes" (essa última na verdade é uma regra). Com elas é possível ter um maior controle sobre a animação, por exemplo:

#ex-css-img8 {
      position:relative;
      animation:mymove 3s infinite alternate;
      -moz-animation:mymove 3s infinite alternate; 
      -webkit-animation:mymove 3s infinite alternate; 
      -o-animation:mymove 3s infinite alternate; 
}

@keyframes mymove {
      from   {
           left:0px; 
      }
      
      to { 
           left:310px; 
           transform: rotate( 360deg ); 
           border-radius: 100px; 
           -moz-transform: rotate( 360deg ); 
           -moz-border-radius: 100px; 
           -webkit-transform: rotate( 360deg ); 
           -webkit-border-radius: 100px; 
           -o-transform: rotate( 360deg ); 
           -o-border-radius: 100px; 
     }
}


Essas propriedades trabalham em conjunto: A propriedade "@keyframes" define os passos da animação( from e to ou 0%,10%,20%... ), e a propriedade "animation" define a @keyframe que vai ser utilizada, o tempo até que animação se complete, a forma e quantas vezes animação será realizada. A sintaxe da propriedade @keyframes é :

@keyframes animationname { keyframes-selector { css-styles; } };;

onde:

animationname: O nome que representa a @keyframes.
keyframes-selector: Um passo na animação. Aceita valores como: from e to ou ainda em percentagem( 0%, 50%, 100%...).
veja mais sobre essa propriedade aqui

E a sintaxe da propriedade animation é :

animation: name duration timing-function delay iteration-count direction;;

onde:

name: É o nome da propriedade @keyframe que será executada.
duration: O tempo até que o efeito termine.
timing-function: Controla a forma de execução do efeito, exemplo mais lento no inicio e mais rápido no final
delay: O tempo antes que o efeito inicie.
iteration-count: A quantidade de vezes que animação será executada.
direction: A forma que animação é realizada.
veja mais sobre essa propriedade aqui

Essas são as principais propriedades para se criar animações com CSS3, os navegadores atuais já estão dando suporte à elas( ainda que com os prefixos dos navegadores ), não deixe de ver os links no final do post, neles você vai encontrar otimas animações com CSS3. Para terminar vou deixar mais um exemplo de animação com as porpriedades "animation" e "@keyframes":

#ex-css-img9  {
     position:relative;
     animation: movex-css-img9 3s infinite alternate;
     -moz-animation: movex-css-img9 3s infinite alternate;
     -webkit-animation: movex-css-img9 3s infinite alternate;
     -o-animation: movex-css-img9 3s infinite alternate;
}
    
@keyframes movex-css-img9 {
     from { 
           left: 390px; 
           width: 120px; 
     }
     75% { 
           left: 195px; 
           width: 60px; 
           transform: rotate( 360deg );   
           border-radius: 100px;     
     }      
     to { 
           left: 0px; 
           width: 120px;
     }
} 

@-moz-keyframes movex-css-img9 {
     from { 
           left: 390px; 
           width: 120px; 
     }
     75% { 
           left: 195px; 
           width: 60px; 
           transform: rotate( 360deg );   
           border-radius: 100px;     
     }      
     to { 
           left: 0px; 
           width: 120px;
     }
}


@-webkit-keyframes movex-css-img9 {
   
     from { 
           left: 390px; 
           width: 120px; 
     }
     75% { 
           left: 195px; 
           width: 60px; 
           transform: rotate( 360deg );   
           border-radius: 100px;     
     }      
     to { 
           left: 0px; 
           width: 120px;
     }
} 


@-o-keyframes movex-css-img9 {
   
     from { 
           left: 390px; 
           width: 120px; 
     }
     75% { 
           left: 195px; 
           width: 60px; 
           transform: rotate( 360deg );   
           border-radius: 100px;     
     }      
     to { 
           left: 0px; 
           width: 120px;
     }
}  

mais sobre animações com css3:
http://marcobruno.com.br/example/parallax-sem-plugin-css3.html
http://www.impressivewebs.com/demo-files/css3-animated-scene/
http://devfiles.myopera.com/articles/9132/sun-rise.html
http://www.broken-links.com/2009/03/10/css-animation-pong/

Paulo Dias

Graduado no curso tecnólogo em análise e desenvolvimento de sistemas. Defensor do Software Livre e da democratização da informação. Possui as certificações Linux LPIC-1 e Java OCA. Atualmente exerce a função de coordenador técnico na área de telecomunicações.

Siga-me no Twitter