Hoje vamos trabalhar com as transições no CSS3. Para que você possa visualiza-las, crie um botão qualquer em sua página e adicione uma classe com sua subclasse hover. Se preferir, utilize o modelo abaixo:

[code language=”html”]



Transição

[/code]

Como código acima, ao “passar o mouse” sobre o botão criado, ele mudaria de cor, de #FFA07A para #CD5C5C, como no exemplo abaixo:

Alterare-mos a classe button, adicionando as propriedades abaixo:

[code language=”css”] .button{
padding: 5px 10px;
background: #FFA07A;
-moz-transition-property: background;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease;
}
[/code]

Salve sua página e atualize-a. Você pode perceber agora que o efeito de hover tem um toque especial. Isso acontece porque, ao invés do botão simplismente mudar da cor X para a Y, como no modelo anterior, realmente temos uma transição elaborada, que “vai mudando de cor” gradativamente.

As propriedade aqui utilizadas foram:

  • transition-property:  Refere-se a propriedade que sofrerá a transição
  • transition-duration: Mencione o tempo que a transição deverá durar.
  • transition-timing-function: Determina o quao rápido a transição ocorre em relação ao tempo.

Para essa propriedade podemos trabalhar com seis valores diferentes: ease, linear, ease-in, ease-out, ease-in-out e cubic-bezier, que nesse caso, permite que você trabalhe com uma função curva própria. Sugiro que você teste cada uma dessa transições e aumente o tempo de duração para que possa percebe-las. Se a preguiça está batento aí, baixe esse arquivo que facilitei as coisas para você 🙂

Nota: Não se esqueça do prefixo do navegador que está utilizando e lembre-se de adiciona-los no desenvolvimento real de uma página, ok?

Uma outra possibilidade ao se trabalhar com transições é estabelecer um atraso para as mesmas. Ou seja, após o tempo de atraso definido o efeito então entrará em ação. Para isso utilizado a propriedade transition-delay. Para ve-la em funcionamento, altere sua classe button para o exemplo abaixo:

[code language=”css”] .button{
padding: 5px 10px;
background: #FFA07A;
-moz-transition-property: background;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease;
-moz-transition-delay: 0.5s;
}
[/code]

Caso você prefira simplificar as coisas, pode escrever essas mesmas linhas de código de transição acima em somente uma, como no exemplo abaixo:

[code language=”css”] .button{
padding: 5px 10px;
background: #FFA07A;
-moz-transition: background 0.3s ease 0.5s;
}
[/code]

Funciona em:

Para conferir a lista mais recente dos elementos que podem sofrer esses efeitos de transição, clique aqui. Para baixar o arquivo com exemplo, clique aqui. Clique no anúncio do adsense abaixo para eu ganhar uns trocados tb 😀


// Comente!

comentários