Você pode ver em vários sites, inclusive aqui, 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:
passe o mouse!
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
div1
/* 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
div2
/* 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
div3
/* 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
div4
/* 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çãotransition, 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!
0 comentários: