Design

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

Crie transições suaves em elementos visuais sem Javascript, no puro CSS. Exemplos fáceis para iniciantes.
Anúncios Google

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.

Author

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Write A Comment

Pin