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!

18 comentários:

  1. Estava mesmo à procura disto, obrigado!

    ResponderExcluir
  2. Bem legal essas transições em CSS, coloquei alguns efeitos em meu blog há algumas semanas atrás.
    Uma grande pena de todos os navegadores não suportarem totalmente isso(Sobretudo o IE).

    ResponderExcluir
  3. Puts Helen, adoro seu blog por essa e outras coisas legais.

    ResponderExcluir
  4. Olá Helen poderia me ajudar a fazer um fundo para meu blog. fundo que digo e igual esse do sei site verde com umas bolas branca ....

    ResponderExcluir
  5. Helen poderia passar os códigos do transition-property pra primeiro aumentar a altura depois a largura?

    e parabéns pelo blog.

    ResponderExcluir
    Respostas
    1. Não acredito que isso seja possível apenas com HTML e CSS. Obrigada e volte sempre!

      Excluir
  6. Somente agora começo à entrar no mundo da programação web (tenho 29 anos)e venho garimpando tudo que acho interessante.
    E com certeza já virei seu fã só vendo este post.
    Muito obrigado por compartilhar seu conhecimento com o público.
    Parabéns!

    ResponderExcluir
    Respostas
    1. HTML e CSS não são linguagens de programação, mas entendo o que quer dizer. Raimison, no final do post Como começar a estudar HTML e CSS há dicas de sites muito bons para você estudar. Sucesso!

      Excluir
    2. Realmente não são linguagens de programação, mas são bem parecidas (risos).
      Obrigado pela dica.

      Excluir
  7. Show de bola Helen !
    Simplificou tudo.

    Muito grato !

    Sds

    ResponderExcluir
  8. Muito bom, foi o melhor tuto que encontrei para esse efeito. Obrigado.

    LL

    ResponderExcluir
    Respostas
    1. De nada. Manda um abraço para a Sandy.

      (Sei que você já deve estar de saco cheio dessa piada, mas não resisti.)

      Excluir

Posts relacionados