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:
Propriedade | O que muda |
---|---|
background-color | Cor |
background-image | Só degradês |
background-position | Porcentagem, largura |
border-bottom-color | Cor |
border-bottom-width | Largura |
border-color | Cor |
border-left-color | Cor |
border-left-width | Largura |
border-right-color | Cor |
border-right-width | Largura |
border-spacing | Largura |
border-top-color | Cor |
border-top-width | Largura |
border-width | Largura |
bottom | Largura, porcentagem |
color | Cor |
crop | Retangular |
font-size | Largura, porcentagem |
font-weight | Número |
grid-* | Diversos |
height | Largura, porcentagem |
left | Largura, porcentagem |
letter-spacing | Largura |
line-height | Número, largura, porcentagem |
margin-bottom | Largura |
margin-left | Largura |
margin-right | Largura |
max-height | Largura, porcentagem |
max-width | Largura, porcentagem |
min-height | Largura, porcentagem |
min-width | Largura, porcentagem |
opacity | Number |
outline-color | Cor |
outline-offset | Integer |
outline-width | Largura |
padding-left | Largura |
padding-right | Largura |
padding-top | Largura |
right | Largura, porcentagem |
text-indent | Largura, porcentagem |
text-shadow | Sombra |
top | Largura, porcentagem |
vertical-align | Keywords, largura, porcentagem |
visibility | Visibilidade |
width | Largura, porcentagem |
word-spacing | Largura, porcentagem |
z-index | Integer |
zoom | Número |
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)