Como usar transições suaves (transitions) só em CSS

Pouco tempo atrás houve um boom de jQuery na internet. Pra quem não sabe, é uma biblioteca JavaScript que facilita muito a vida dos web designers, permitindo desenvolver soluções e estilizações sem problemas de compatibilidade entre navegadores.

Muitos sugeriam códigos para aplicar transições suaves de cor de fundo, links e divs, coisa facilmente alcançável com poucas linhas de CSS. A questão é que os navegadores ainda não estavam bem preparados para essas regras. Uma estilização que funcionava no Firefox poderia não mostrar nada no Opera, por exemplo.

Agora a coisa mudou; quase todos trabalham bem com CSS3 e muitas vezes não é preciso usar jQuery. Vamos ver um código simples para aplicar transições em elementos mais comuns, como links e divs com efeito hover. Sabendo como fazer, você pode estilizar outros elementos, como menus de navegação.

Antes de começar, abra a página de exemplos, aqui.

Código básico

O básico para criar as transições será o uso do transition, com ease. Essa propriedade é aceita pelos principais navegadores, exceto Internet Explorer, por enquanto. Para maior compatibilidade, crie regras que atendam a todos: webkit, moz, o e a propriedade básica.

Atualização 2018: todos os principais navegadores já têm suporte ao transition, dispensando prefixos como webkit e moz. Se quiser garantir compatibilidade, até pode usá-los, mas também é seguro usar só o transition. 

Veja um exemplo de regras comentadas:

elemento {
     transition: 0.3s ease-in // geral
     -webkit-transition: 0.3s ease-in; // navegadores webkit, como Safari e Chrome
     -moz-transition: 0.3s ease-in; // Firefox
     -o-transition: 0.3s ease-in; // Opera
}

O significado é simples: propriedade transição, com 0.3 segundo de duração, e uma “desaceleração” no início da transição.

Aplicando em links

Exemplo 1: criando o link hover

Básico de HTML: fazer um link mudar de cor ou tamanho quando passamos o mouse. Pra quem não lembra, é isso:

a {
     color: #c00; // ou seja, links vermelhos
}

a:hover {
     color: #fc0;// amarelos ao passar o mouse
}

Veja em funcionamento na página de teste, Exemplo 1.

Exemplo 2: criando a transição

Agora, vamos usar a transition para suavizar a mudança de cor.

a {
     color: #c00;
     -webkit-transition: 0.3s ease-in;
     -moz-transition: 0.3s ease-in;
     -o-transition: 0.3s ease-in;
     transition: 0.3s ease-in
}

a:hover {
     color: #ffcc00;
     -webkit-transition: 0.3s ease-in;
     -moz-transition: 0.3s ease-in; 
     -o-transition: 0.3s ease-in;
     transition: 0.3s ease-in
}

Veja em funcionamento na página de testes, Exemplo 2.

Exemplo 3: cor de fundo com transição

Funciona para outras mudanças do link, como a cor de fundo (background-color). Veja o exemplo:

#teste3, #teste3 a {
     color: #c00!important;
     background-color: #fff;
     -webkit-transition: 0.3s ease-in !important;
     -moz-transition: 0.3s ease-in !important;
     -o-transition: 0.3s ease-in !important;
     transition: 0.3s ease-in !important;
}
#teste3:hover {
     color: #fff !important;
     background-color: #c00;
     -webkit-transition: 0.3s ease-in !important;
     -moz-transition: 0.3s ease-in !important;
     -o-transition: 0.3s ease-in !important;
     transition: 0.3s ease-in !important;
}

“teste3” é o identificador do link. Além dos efeitos hover e transition de antes, ele também tem uma cor de fundo, pela propriedade “background-color”. No padrão foi determinado como branco (hexa #fff ou #ffffff), ficando vermelho ao passar o mouse (hexa #c00 ou #cc0000).

O link foi criado com:

<a id="teste3">Link</a>

Propriedades que aceitam CSS transition

A lista de propriedades que podem ser alterados por transition é grande. Inclui quase tudo, incluindo cores, valores integrais como posicionamento e tamanho. Uma exceção notável são as box-shadow.

A lista completa:

Exemplo 4: transition em DIVs

Mais um exemplo, agora alterando a cor de fundo, largura e a cor do texto dentro da div com a classe “mudacor”.

CSS para a div normal:

.mudacor {
background-color: #c00;  /* cor de fundo da div */
color: #fff;  /* cor do texto dentro da div */
width:50%;  /* largura da div */
}
.mudacor:hover {
background-color: #fc0;
color: #000;
width:70%; /* largura da div */
}

Veja na página de exemplos, Exemplo 4.

Estilo da div acima, mas com transition:

.mudacor {
     background-color: #c00; /* cor de fundo da div */
     color: #fff; /* cor do texto dentro da div */
      width:50%; /* largura da div */
     -webkit-transition: 0.8s linear; 
     -moz-transition: 0.8s linear; 
     -o-transition: 0.8s linear;
     transition: 0.8s linear
}
.mudacor:hover {
     background-color: #fc0;
     color: #000;
     width:70%; /* largura da div */
     -webkit-transition: 0.3s linear; 
     -moz-transition: 0.3s linear; 
     -o-transition: 0.3s linear;
     transition: 0.3s linear
}

Veja na página de exemplos, Exemplo 5. Note que a alteração é mais lenta ao voltar ao normal, porque usei 0.8s na classe padrão, e 0.3 na classe com hover (ou seja: no “hover”, a transição é mais rápida).

👍

NOTA: se acessar a página de exemplos com o Internet Explorer, pode notar que as regras não funcionaram. Você deve considerar a possibilidade de trocar de navegador. Veja algumas razões porque todo mundo odeia o Internet Explorer.

Para saber mais, links. São boas referências para aprofundar o tema das transitions, mas os exemplos mostrados aqui com ease e linear são suficientes para aplicar em casos mais simples.

• W3Schools – CSS3 Transitions (em inglês)
• Maujor – CSS3 – Módulo Transitions
• W3Org – CSS3 Transition (em inglês)