Introdução ao CSS Animation

29 de June de 2009 - 06:00

Tudo o que eu falarei aqui sobre CSS Animation e CSS Transforms só podem ser testados no Safari ou em qualquer outro browser que utilize as últimas versões do Webkit. Há algumas aplicações que modificam muito o Webkit para usá-lo, pode ser que nestes, não funcione direito. Mesmo assim, infelizmente, o Webkit (por enquanto) é o único motor que suporta esse tipo de característica.

CSS Animation permite que modifiquemos propriedades do CSS e tenhamos o resultado ali, na hora.
Para isso, usaremos uma propriedade chamada transition. Essa propriedade é divida em 3 propriedades: transition-property que é a propriedade que deverá ser animada, transition-duration é quanto tempo a transição irá durar, e transition-timing-function é o tipo de transição.

Imagine o seguinte código:

div { border: 10px solid black; width: 300px; height:300px; background:gray;
}
 
div:hover { background:red;
}

O código acima faz com que quando o usuário passe o mouse em cima do DIV, o background mude de cor.

Vamos adicionar a propriedade transition agora. Note o código abaixo:

div { border: 10px solid black; width: 300px; height:300px; background:gray;
  -webkit-transition: background 1s linear;
 
}
 
div:hover { background:red;
}

O CSS Animation entrará em ação com a propriedade transition.
Note que a propriedade tem o prefixo do Webkit, indicando que isso só funciona em browsers com este motor.

A propriedade transition tem 3 valores: o primeiro valor é a propriedade que você quer alterar. O segundo valor é o tempo que essa animação durará. O terceiro valor é tipo de transição.

Você pode fazer várias transições em, separando os valores por vírgulas. Veja o exemplo:

div { border: 10px solid black; width: 300px; height:300px; background:gray;
  -webkit-transition: background 1s linear, width 1s linear;
 
}
 
div:hover { background:red; width: 400px;
}

Neste caso, iremos animar a largura do DIV e ao mesmo tempo, mudaremos a cor de background.

Exemplo de CSS Animation

CSS Transform

Tudo isso fica mais interessante se utilizarmos algumas propriedades do CSS Transform.
O CSS Transform é uma das características do CSS que tranformam a forma original dos elementos do HTML. Por exemplo, inclinação. Veja abaixo:

div { border: 10px solid black; width: 300px; height:300px; background:gray; -webkit-transition: background 1s linear, width 1s linear;
  -webkit-transform: rotate(3deg);
 
}

No código acima, utilizei a propriedade transform com o valor rotate. Este valor rotaciona o elemento em sentido horário para um determinado grau. No caso acima, ele está inclinando o elemento com o valor de 3 graus.

Podemos fazer uma animação interessante utilizando o transform: rotate. Teste o código CSS abaixo:

div { border: 10px solid black; width: 300px; height:300px; background:gray; -webkit-transform: rotate(0deg); -webkit-transition: background 1s linear, width 0.5s linear, -webkit-transform 1s linear;
}
 
div:hover { background: red; width: 400px; -webkit-transform: rotate(360deg);
}

O código acima fará com que o elemento gire 360 graus.

Testei no iPhone

Fiz um teste rápido no iPhone. No iPhone, a função de HOVER é acionada quando o elemento é clicado. As animações funcionam perfeitamente, com exceção do giro de 360 graus que pára no meio e o elemento volta a posição normal.

Quem tiver algum celular Nokia com browser baseado em Webkit, faça uns testes e comenta com a galera os resultados.

Ainda é um rascunho no W3C

Tudo isso ainda é um rascunho lá no W3C. Mas a Apple já propôs sua idéia de como poderia ser o funcionamento do CSS Transformations aqui:
Apple’s Proposal for CSS Transformations.

O interessante é que os browsers hoje em dia estão andando com as próprias pernas. Na verdade não apenas os browsers, mas todos os desenvolvedores. Ninguém está esperando o W3C para implementar e inventar coisas. Todos estão ajudando a pensar como pode ser o desenvolvimento web de amanhã. O trabalho do W3C está se resumindo em estudar, incluir e modificar as idéias da comunidade e de suas equipes – que por sinal, estão em mais espertas e rápidas agora.

A documentação do rascunho do W3C está disponível aqui:
http://www.w3.org/TR/css3-animations/

Há bastante coisa para se ler aqui: