Conhecendo a propriedade CSS3 transition

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Você pode ver em vários sites, inclusive aqui no Mundo Blogger, um efeito interessante em alguns links. Normalmente, quando passamos o mouse sobre um link, algo em seu estilo muda: seja a cor, o sublinhado, uma borda, o background. E esse tal ‘efeito interessante’ consiste numa transição gradativa de um estilo para outro, como você pode conferir na demonstração abaixo:

 

 

Essa transição é alcançada por meio da propriedade CSS3 transition. Essa propriedade é suportada pelos principais navegadores (Firefox, Chrome, Opera, Safari – e reza a lenda que IEca 10 também), sendo que Chrome 24 e anteriores e Safari precisam do prefixo -webkit- para renderizar o efeito.

Sintaxe

A sintaxe da transition suporta quatro valores que podem ser definidos:

• a propriedade afetada pela transição (como cor, background, largura, bordas etc.);
• o tempo de duração dessa transição, em segundos (quanto tempo vai levar para o estilo ser alterado completamente);
• a função de timing (sinceramente isso não faz a menor diferença) e
• o tempo de atraso para a transição ser executada, também em segundos (quanto tempo demorará para a transição iniciar quando o mouse passar sobre tal elemento).

Cada um desses valores tem uma propriedade específica, mas é bem mais prático e comum que eles sejam compilados. Confira demonstração abaixo:

.transicao {
 transition-property: width; /* propriedade que sofrerá a transição */
 transition-duration: 2s; /* duração da transição */
 transition-timing-function: linear; /* timing-function */
 transition-delay: 0; /* atraso do início da transição */ 
/* agora vamos repetir toda a declaração com o prefixo -webkit- para que o efeito funcione no Chrome 24 e no Safari */
 -webkit-transition-property: width;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: linear;
 -webkit-transition-delay: 0;
}
/* ou a propriedade compilada */
.transicao {
 transition: width 2s linear 0;
 -webkit-transition: width 2s linear 0;
}

No exemplo acima, os elementos com a class ‘transicao’ terão sua largura alterada em dois segundos assim que o mouse passar sobre eles. Mas só desse jeito, nada vai funcionar.

CSS3 Transition na prática

Quando você define o estilo de um link, geralmente usa o seletor a:link e, ao definir o estilo quando o mouse estiver sobre o link, o comando é a:hover. Bem, primeiramente saiba que transition pode ser utilizado em qualquer elemento HTML, não só links (nos exemplos da demonstração, usei divs simples). E para que o efeito transition funcione corretamente, você deve definir dois blocos de estilo para o elemento; a saber, o estilo da tag/id/class normal e o estilo da tag/id/class no modo :hover. Ou seja:

tag, #id, .class {
 /* insira os estilos que você quer para o seletor */
 /* insira abaixo os comandos para transition */
}
tag:hover, #id:hover, class:hover {
 /* insira os estilos para quando o mouse estiver sobre o elemento */
 /* não é necessário repetir a declaração de transition */
}

[dica]Dica: você pode definir o mesmo estilo para vários seletores, separados por vírgulas, como eu fiz acima a título de exemplificação, mas isso não é necessário.[/dica]

Exemplos práticos

Seguem abaixo exemplos de elementos com transition com seus respectivos códigos.

[alerta]Não vou usar timing-function nesses exemplos porque não faz diferença, então o primeiro valor em segundos é a duração e o segundo é o atraso.[/alerta]

Exemplo 1

/* com apenas uma propriedade */
#div1 {
 background: #bebebe;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color;
-o-transition-duration: 2s;
}
#div1:hover {
 background: #dda0dd;
}

Exemplo 2

/* com duas propriedades e atraso */
#div2 { 
background: #bebebe; 
border: 5px solid #000;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color;
-o-transition-duration: 2s;
}
#div2:hover {
background: #dda0dd; 
border: 5px solid #68228b;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color;
-o-transition-duration: 2s;
}

Exemplo 3

/* com três propriedades e atraso */
#div3 { 
background-color:#bebebe;
-moz-transition-property: background-color,width;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,width;
-webkit-transition-duration: 2s;-o-transition-property: background-color,border,width;
-o-transition-duration: 2s;
}
#div3:hover { 
width:300px;
background-color:#000;
color:#fff;
-moz-transition-property: background-color,width;-moz-transition-duration: 2s;
-webkit-transition-property: background-color,width;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,width;
-o-transition-duration: 2s;color:#fff;
}

Exemplo 4

/* com todas as propriedades simultaneamente */
#div4 { 
background: #bebebe; 
border: 5px solid #000; 
width: 100px; 
transition: all 2s; 
-webkit-transition: all 2s;
} 
#div4:hover { 
background: #dda0dd; 
border: 5px solid #68228d; 
width: 300px;
}

Outras dicas

• Como você conferiu nos exemplos acima, você pode atribuir diferentes regras de transições para elementos distintos numa única regra – basta separá-los por vírgula.
• Como também ilustrado, não é obrigatório usar as quatro propriedades numa declaração transition, mas a ordem delas deve ser SEMPRE property/duration/timing-function/delay.
• Os valores em duration e delay devem ser expressos em segundos, mas às vezes um segundo é muito tempo para uma transição (caso dos links normais, pelo menos eu acho). É possível usar valores de segundos quebrados usando apenas um ponto, por exemplo, .5s significa meio segundo, .7s significa sete décimos de segundo e 1.2s significa um segundo e dois décimos.
• Se você quiser usar o mesmo tempo e atraso (em suma, a mesma regra) para todas as propriedades daquele seletor, não precisa especificar um por um separados por vírgula; basta usar ‘all’ (sem aspas) ao invés de identificar a propriedade em questão.
• Em intervalos pequenos de tempo, o timing-function da propriedade transition não dá um efeito notável, sendo mais útil apenas em animações mais avançadas. Apenas a título de curiosidade, os valores possíveis são ease (padrão, que faz a transição com um início devagar, depois fica mais rápida e termina devagar), linear (mesma velocidade de transição do início ao fim), ease-in (transição começa devagar e aumenta de velocidade), ease-out (transição começa rápida e diminui a velocidade no final) e ease-in-out (basicamente a mesma coisa de ease).
• Declarações transition devem constar, evidentemente, no CSS. No Blogger, o CSS fica antes de ]]</b:skin>.
• Se você for usar transition em links, tome o cuidado de incluir em TODOS os links; usar transition só em metade dos links das páginas causa um negócio esquisito e desagradável a quem visita.

 

Conclusão

Hoje você aprendeu a utilizar a propriedade CSS3 transition, que nos permite fazer um efeito estilístico simples e interessante quando passamos o mouse sobre determinado elemento. Você gostou da possibilidade? Vai implementar no seu blog? Conte para a gente!

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn