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”]
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 😀
[…] 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 […]
… [Trackback]…
[…] There you will find 78884 more Infos: eufacoprogramas.com/desenvolvimento/css3-trabalhando-com-transicoes/ […]…
… [Trackback]…
[…] Read More: eufacoprogramas.com/desenvolvimento/css3-trabalhando-com-transicoes/ […]…
sou ainda amador de paginas web gostaria de agradecer pelos os comentarios postados no teu site valeu