Transition: transição suave com CSS3

Comece agora a usar uma das grandes novidades da versão 3 do padrão CSS: transition.

Antes, os eventos de foco eram abruptos; agora, eles são suavizados, criando uma transição entre dois estágios configurados.

Por exemplo, num primeiro momento, o texto de um link tem a cor vermelha e, está configurado para mudar para azul caso o mouse role sobre ele (evento :hover). No modo tradicional, a alteração da cor do texto é imediata. Com o CSS3 é possível fazer com que a cor transite suavemente de vermelho para azul. E não é só: o texto pode ganhar uma animação, aumentando ou diminuindo, girando, desaparecendo etc.

O elemento transition analisa as propriedades iniciais e as propriedades do segundo estágio e aplica uma transição conforme os valores que configurarmos (por exemplo, a duração da transição).

De fato, são quatro propriedades atualmente:

• Transition-property: propriedade sobre a qual será aplicada a transição, por exemplo, cor do texto, espessura da borda, posição do objeto (texto, imagem etc) e assim por diante E possível usar o valor all para configurar transição para todas as propriedades.
• Transition-duration: duração do efeito, contado em segundos.
• Transition-timing-function: permite configurar o ritmo do efeito, por exemplo, acelerado no início e andamento decrescente, acelerar no final do tempo. O andamento linear é o padrão. Essa propriedade igualmente permite criar efeitos de andamento extraordinários, fora de um padrão natural, chamada de curva de Bezier, por exemplo, fazer o objeto dar saltos no intercurso da transição Veja aqui alguns exemplos dessas funções.
• transition-delay: permite especificar um atraso em segundos para o começo do efeito a ser aplicado. O padrão é zero, ou seja, a transição começa imediatamente.

As duas primeiras são obrigatórias e as demais são declaradas opcionalmente.

A sintaxe de transição é escrita assim no CSS:

transition-property: propriedade;
transition-duration: valor;
transition-timing-function: valor;
transition-delay: valor;

Ou, de forma simplifica, numa só linha:

transition: propriedade duração função-de-andamento atraso;

Por exemplo:

.objeto {
   transition: width 2s linear 0;
}

No exemplo acima, aplicamos a transição a um objeto (pode ser uma div, um texto, uma imagem etc.) relativo à propriedade largura (width), cuja duração será de dois segundos, num andamento linear e sem atraso (0 delay). Nesse caso, como as duas últimas propriedades (timing-function e delay) têm os valores padrões, eles poderiam ser omitidos. O código simples ficaria assim:

.objeto {
   transition: width 2s;
}

Agora, para que a transição ocorra, seria preciso estilizar um evento :hover ou :foccus para o mesmo objeto, alterando a propriedade width desse objeto, para quando o usuário efetuar o ação (rolar o mouse sobre o objeto) se processe a transição.

Importante: veja aqui quais navegadores suportam a aplicação transition.

Vamos a um exemplo prático?

Em uma página qualquer de html, cria uma div e lhe atribua a classe box:

<div class="box"></div>

No css, estilize essa classe aplicando-lhe largura (width), altura (height), borda e cor de fundo com os seguintes valores:

.box {

   width: 100px;

   height: 100px;

   border: 5px solid red;

   background-color: black;

}

Em seguida, no mesmo CSS, vamos estilizar essa div para quando ela receber o foco (o mouse rolar sobre ela), duplicando a largura e a altura, alterando as cores da borda e do preenchimento da div:

.box:hover {

   width: 200px;

   height: 200px;

   border: 25px solid yellow;

   background-color: red;

}

Abra a página num navegador e verá que a transformação abrupta da div quando rolar o mouse sobre ela.

Mas então, vamos aplicar a transição, comecemos ativando as alterações na borda, estabelecendo um tempo de cinco segundos.

Acrescente a seguinte linha para a classe da box no CSS:

   -webkit-transition: border, 5s;

Rode a página agora e veja a transformação suave que ocorre com a borda mudando de cor (de preto para amarelo) e ficando mais grossa (de 5px para 25px).

No entanto, não há ainda transição para as alteração nos valores de altura e largura, nem para a cor do preenchimento da div. Então, vamos configurar esse efeito editando a linha acima para acrescentar as demais propriedades:

   -webkit-transition: border, 5s, width, width 3s, height 3s, background-color 10s;

Atualize a página no navegador, role o mouse sobre a div e veja o resultado. o quadrado cresce suavemente (de 100px para 200px), a borda engrossa e muda de cor e o preenchimento, num período de dez segundos, muda de azul para vermelho.

O código completo da html com o exemplo acima é esse:

<!DOCTYPE HTML>

<html>

  <head>

    <meta charset="utf-8">

    <title>Transitions em CSS3</title>

    <style>

      .box {

        border:5px solid black;

        width: 100px;

        height: 100px;

        background-color: blue;

        transition: width 3s, height 3s, border 5s, background-color 10s;

      }

      .box:hover {

         border:25px solid yellow;

         background-color: red;

         width: 200px;

         height: 200px;

       }

    </style>

  </head>

  <body>

     <div class="box"></div>

  </body>

</html>

Ah, vamos acrescentar mais umas coisinhas:

Primeiro, vamos replicar a instrução das transições acrescentando os prefixos necessários para os navegadores (-webkit para o Chrome e Safari, -moz para Mozila e -o para o Opera) e acrescentar o efeito de rotação da div. O código final é este:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Transitions em CSS3</title>
    <style>
.box {
border:5px solid black;
width: 100px;
height: 100px;
background-color: blue;
-webkit-transition: all 3s;
  -moz-transition: all 3s;
                 -o-transition: all 3s;
          transition: all 3s;
}

.box:hover {
border:25px solid yellow;
background-color: red;
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
               -moz-transform: rotate(180deg);
                 -o-transform: rotate(180deg);
                    transform: rotate(180deg);
}

    </style>

  </head>
  <body>
     <div class="box"></div>
  </body>
</html>

Veja abaixo como fica o nosso brinquedinho:

Mais especificações e exemplos de transitions nesse site.