Busca

Carregando...

sexta-feira, 9 de setembro de 2011

Transição suave com CSS

Não funciona no Internet Explorer!

Este é, sem dúvida, um dos efeitos mais divertidos de CSS 3. A propriedade transition (transição) faz com que as mudanças de posição, cores, cantos e tamanhos de um elemento sejam gradativas. Quanto maior a duração, mais suave será o fade.

Para ver o recurso em ação, coloque o cursor do mouse dentro do retângulo abaixo. Mantenha o ponteiro sobre o retângulo durante toda a transição para ver a mudança até o final.

— O que é isto?
— Apenas um teste legal!

► Exemplo simples

O modelo que mostrei acima é bastante complexo. Nele eu modifico quase tudo a que tenho direito: cores, fundo, bordas, cantos, tamanho de fonte, margens. Para que você compreenda melhor a propriedade, primeiro vou apresentar um código mais enxuto:

<style> div#facil {margin:auto; color:#000000; background:yellowgreen; width:100px; height:100px; transition:all 5s; -moz-transition:all 5s;
-o-transition:all 5s; -webkit-transition:all 5s;} div#facil:hover {background:greenyellow; width:450px;} </style>

<div id="facil">Este exemplo é mais fácil de entender.</div>

Resultado:

Este exemplo é mais fácil de entender.

► Exemplo complexo

No primeiro exemplo deste post foi utilizado o seguinte código:

<head> <style type="text/css"> div#muda {padding:10px; margin:20px; margin-left:auto; margin-right:auto; color:#40E0D0; font-size:30px; width:400px; height:100px; background-color:#40E0D0; box-shadow: 10px 10px 35px #40E0D0; border:13px solid #AFEEEE; transition:all 5s linear; -moz-transition:all 5s linear;
-webkit-transition:all 5s linear; -o-transition:all 5s linear;} div#muda:hover { margin:40px; margin-left:auto; margin-right:auto; color:white; font-size:50px; width:300px; height:300px; background-color:salmon; box-shadow: 10px 10px 10px #F08080; border:1px solid #F08080;} </style> </head> <body> <div id='muda'><span style='color:salmon;'>— O que é isto?</span><br/>— Apenas um teste legal!</div> </body>
— O que é isto?
— Apenas um teste legal!

► Aplicação imediata

Esta propriedade já pode ser inaugurada imediatamente em seu blog. Basta adicionar o seguinte código à folha de estilos.

CSS padrão:
<style>
* {transition:all 2s linear; -moz-transition:all 2s linear;
-webkit-transition:all 2s linear; -o-transition:all 2s linear;}
</style>
CSS do Blogger:
* {transition:all 2s linear; -moz-transition:all 2s linear;
-webkit-transition:all 2s linear; -o-transition:all 2s linear;}
]]></b:skin>

No Blogger você vai conseguir notar mudança quando passar o mouse sobre os links e os botões de compartilhamento do rodapé do post. Usando Chrome e Opera também será percebida uma interessante diferença no carregamento do widget do Facebook, caso você o tenha.

Para experimentar as mudanças antes de instalar o código em seu blog, abra o HTMHelen no Chrome e ao mesmo tempo no Internet Explorer.

► Legenda

  • transition - agrupa todas as propriedades de transição.
  • transition-property - aqui você define quais propriedades terão uma transição suave. Exemplos: width, height, color.
    Quando você escolhe quais atributos terão fade, os outros terão mudança brusca, o que pode tornar o efeito bastante estranho. Recomendo sempre usar all porque assim tudo muda no mesmo ritmo.
  • transition-duration - escolha quanto tempo vai durar a transição. As unidades de medida são s (segundos) e ms (milissegundos). No exemplo acima foi definida a duração de 5s (cinco segundos).
  • transition-delay - OPCIONAL - você pode determinar um tempo para a transição começar. Para uso corriqueiro não recomendo definir delay porque tudo que obriga as pessoas a esperarem (qualquer milissegundo que seja) tende a ser muito irritante. Essa propriedade tem maior utilidade para quem cria jogos e outros aplicativos com HTML e CSS. As unidades também são s e ms.
  • transition-timing-function - OPCIONAL - com esta propriedade você escolhe a variação da velocidade do fade ao longo do movimento:
    1. linear → velocidade constante. Equivale a cubic-bezier(0,0,1,1).
    2. ease [padrão] → início lento, fica rápido, fim lento. Equivale a cubic-bezier(0.25,0.1,0.25,1).
    3. ease-in → início lento. Equivale a cubic-bezier(0.42,0,1,1).
    4. ease-out → fim lento. Equivale a cubic-bezier(0,0,0.58,1).
    5. ease-in-out → início lento e fim lento. Equivale a cubic-bezier(0.42,0,0.58,1).
    6. cubic-bezier(n,n,n,n) → defina a variação de velocidade manualmente. Exemplo: transition-timing-function:cubic-bezier(0.5,0,0.5,1).

A propriedade transition ainda está em fase beta nos navegadores, por isso para conseguir resultado ainda é necessário utilizar os seguintes prefixos:

  • -webkit- para funcionar no Chrome, no Safari e nos navegadores derivados dele.
  • -moz- para funcionar no Firefox e nos navegadores derivados dele.
  • -o- para funcionar no Opera e nos navegadores derivados dele.

Para dominar todas as possibilidades desta propriedade, recomendo que faça seus testes no bloco de notas, como já expliquei no post Como começar a estudar HTML e CSS.

Não funciona no Internet Explorer!

Fonte: w3schools.com

Até mais!

Posts relacionados