CSS Transitions

Introdução

CSS Transitions é um módulo da linguagem CSS 3 que permite especificar como serão as transições entre propriedades CSS quando ocorre algum evento. Por exemplo, no CSS 2.1, quando utilizamos a pseudo-classe ":hover" em um link e especificamos uma cor de fonte diferente, a transição da cor antiga para a nova é instantânea ao passar o mouse sobre o link. Com CSS Transitions, é possível especificar como se dará a transição de uma cor para a outra, ou seja, dentro de um tempo especificado, a cor do link irá variar várias vezes, percorrendo o degradê que varia entre a cor inicial e a cor final, causando um efeito [eu diria] mais "agradável" de se ver. E o melhor: é uma animação nativa do navegador, sem precisar de JavaScript ou Flash.

Uma das melhorias da nova engine do Firefox 4 (Gecko 2) é justamente o suporte (ainda incompleto) às transições CSS. Portanto, nada melhor que aprender um novo recurso e já curtir os efeitos onde eles são suportados.

---

Onde se aplica?

As transições ocorrem quando um elemento muda uma propriedade CSS de um valor para outro. Isso ocorre naturalmente nas pseudo-classes: ":hover", ":active", ":visited" e ":focus", mas também podem ocorrer via linguagem de Script (por exemplo, JavaScript), quando um elemento muda de uma classe CSS para outra dinamicamente, ou algo semelhante (recebe um ID, perde uma classe, recebe uma nova classe, etc.).

Portanto, normalmente especificamos as transições ao definir uma pseudo-classe, mas também podemos especificá-las ao definir classes CSS, IDs, ou outro seletores quando utilizamos JavaScript para modificar dinamicamente um elemento.

Na especificação da transição, definimos quais propriedades CSS sofrerão transição, quanto tempo cada uma irá demorar, se haverá um delay até que a transição comece, e como será a curva de transição.

As transições normalmente se aplicam a tamanhos, cores e posições, com alguns casos específicos em que se mudam outras propriedades. Mas nem todas propriedades aceitam transição. Para conferir se uma propriedade aceita ou não, veja a lista de elementos que podem sofrer transição, definida pela W3C. Se você está usando o Firefox 4 para testar, lembre-se de ver a lista de elementos que podem sofrer transição no Gecko 2.

---

Como funciona?

Sabendo onde se aplicam as transições, o funcionamento é simples. Basicamente o navegador avalia quais propridades sofrerão transição, os valores iniciais e finais, e monta uma espécie de "animação" para que a propriedade mude de um valor para o outro gradativamente, seguindo o tempo, delay (atraso) e curva de aceleração indicada.

Para especificar uma transição são utilizadas 4 propriedades especiais:

• transition-property: especifica quais propriedades sofrerão transição (separadas por vírgula) ou permite os valores especiais "none" e "all" para representar "nenhuma" ou "todas" propriedades respectivamente.
• transition-duration: especifica quanto tempo irá durar a transição de cada propriedade definida em "transition-property". Pode ser um valor único para todas propriedades ou então um valor para cada propriedade separados por vírgula (na mesma ordem que definido em "transition-property").
• transition-delay: especifica o tempo de atraso que a transição deve ter em relação ao instante em que o evento ocorreu. Assim como ocorre em "transition-duration", ela pode especificar um valor único para todas propriedades ou pode especificar um atraso diferente para cada propriedade separados por vírgula.
• transition-timing-function: especifica o tipo de aceleração que a transição sofrerá. Você pode imaginar isso como um carro acelerando de 0 a 100 Km/h: ele pode fazer isso de forma linear, ou seja, aumentando a velocidade sempre na mesma intensidade, ou pode variar a aceleração, por exemplo aumentando a velocidade a uma intensidade alta dos 0 a 50, mas aumentando a velocidade a uma intensidade menor dos 50 a 100 Km/h. Para entender melhor os possíveis valores e respectivo comportamento, leia a especificação da W3C.

---

Exemplo

Vamos fazer um link mudar a cor de fundo, a cor da fonte e aumentar a fonte quando passar o mouse sobre ele. Vejamos o código CSS:

/* Botao normal */
.botao {
  background-color: #AA0000; /* cor vermelho escuro */
  color: #0000AA;            /* cor azul escuro     */
  font-size: 12pt;           /* tamanho normal      */

  display: block;
  width: 150px;
  height: 50px;
  text-align: center;
  line-height: 50px;

  /* Transicao quando o link voltar ao normal */
  transition-property: background-color, color, font-size;
  transition-duration: 1s;
}

/* Botao recebe o mouse sobre */
.botao:hover {
  background-color: #FF0000; /* cor vermelho claro */
  color: #6666FF;            /* cor azul claro     */
  font-size: 20pt;           /* tamanho grande     */

  /* Transicao quando o link receber o mouse sobre ele */
  transition-property: background-color, color, font-size;
  transition-duration: 3s, 1s, 1s;
}

Agora, é só aplicar a classe CSS a um link, por exemplo:

<a class="botao" href="http://rubsphp.blogspot.com/">PHP, Web e coisas assim</a>

Observe que ao passar o mouse, a cor de fundo leva 3 segundos para mudar de vermelho escuro para vermelho claro, mas a cor e tamanho da fonte levam apenas 1 segundo. Por outro lado, ao sair o mouse de cima do link, todas propriedades voltam ao normal em 1 segundo.

---

Observações

No Firefox 4 (Gecko 2), as propriedades possuem prefixo "-moz-". Por exemplo, "transition-property" é especificado através de "-moz-transition-property". Você pode especificar estas propriedades correspondentes com o mesmo valor.

No Chrome (Webkit), as propriedades possuem prefixo "-webkit-". Por exemplo, "transition-property" é especificado através de "-webkit-transition-property".

Outro detalhe é que, assim como acontecem em outras propriedades, existe um atalho para especificar todas características de uma transição de uma só vez. Isso é feito através da propriedade transition, que pode receber várias transições, mas os tempos, atrasos e curvas devem ser especificadas para cada propriedade individualmente. Assim, cada transição é separada por vírgula. Reescrevendo o exemplo anterior, teriamos isso:

.botao {
  background-color: #AA0000;
  color: #0000AA;
  font-size: 12pt;

  display: block;
  width: 150px;
  height: 50px;
  text-align: center;
  line-height: 50px;

  transition: background-color 1s, color 1s, font-size 1s;
}
.botao:hover {
  background-color: #FF0000;
  color: #6666FF;
  font-size: 20pt;

  transition: background-color 3s, color 1s, font-size 1s;
}

Por fim, resalta-se que as transições não são herdadas entre elementos filhos. Por exemplo, se um elemento DIV tem uma transição, não significa que seu elementos filhos terão a mesma transição.