CSS3 – Trabalhando com transições

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

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

5 Comentários

  • […] O menu agora já está funcional. Mas que tal dar um toque a mais utilizando efeitos de transição CSS3? Leia mais sobre aqui. […]

  • […] possibilidade ao se trabalhar com transições é estabelecer um atraso para as mesmas. … Read More… CSS3 – Trabalhando com transiçõesAutoCAD Release 10 TutorialG¹ interpolation of generally […]

  • Responder janeiro 12, 2012

    Homepage

    … [Trackback]…

    […] There you will find 78884 more Infos: eufacoprogramas.com/desenvolvimento/css3-trabalhando-com-transicoes/ […]…

  • Responder fevereiro 15, 2012

    ares free download

    … [Trackback]…

    […] Read More: eufacoprogramas.com/desenvolvimento/css3-trabalhando-com-transicoes/ […]…

  • Responder agosto 8, 2014

    Mario Carlos chita

    sou ainda amador de paginas web gostaria de agradecer pelos os comentarios postados no teu site valeu

// Siga as boas práticas: Comente!