Dicas para Criação de sites

Criando animações e efeitos diversos utilizando o módulo Transition

Informação:
Com a introdução do CSS3, o módulo Transition (que apesar de ja fazer parte do Webkit há algum tempo) foi adicionado aos navegadores mais recentes como o Firefox 4 e Chrome 10, possibilitando a implementação de efeitos e animações que anteriormente seria apenas possíveis utilizando animações em flash.

Neste artigos daremos alguns exemplos de utilização do módulo Transition.

Obs: Vale lembrar que essa função CSS3 funciona apenas nos navegadores Google Chrome 10, Mozila Firefox 4 e Safari 5. Cada um desses navegadores precisará de um prefixo para que funcione, lembrando que esse prefixo será temporário até que o W3C valide os comandos CSS3.

Lista com prefixo de cada navegador
Google Chrome e Safari: -webkit-
Mozilla Firefox: -moz-
Opera: -o-

Vejamos alguns exemplos:

<style>.exemplo{display: inline-block;border: 1px dashed #000;padding: 10px;background: #ffffa2;height: 20px;opacity: 0.3;-moz-transition: height 1s ease-out, opacity 1s ease;-webkit-transition: height 1s ease-out, opacity 1s ease;-o-transition: height 1s ease-out, opacity 1s ease;transition: height 1s ease-out, opacity 1s ease;} .exemplo:hover {height: 40px;opacity: 1;}</style>

Onde:
O módulo Transition se baseia em diferentes propriedades para indicar quais serão aos efeitos  aplicados as transições. Vejamos abaixo alguns exemplos:

- transition-property: Determina qual propriedade sofrerá as transições (height, width, background-color e muitos outros, sendo utilizado "all" para indicar transição em todas as propriedades elegíveis)

- transition-duration: Define o tempo de duração da transição em segundo (ex: 2s, 4s)

- transition-timing-function: Define a forma como a transição progride no tempo
Os valores possíveis para essa propriedade são:
   • linear
   • ease
   • ease-in
   • ease-out
   • ease-in-out
   • bezier-cubic

Em linhas gerais cada um dos valores define uma taxa de animação ao longo do tempo.
Exemplo: ease-in define uma transição que começa lentamente e acelera no final.

- transition-delay: Define o tempo de espera em segundos para início da transição

Todas essas propriedades podem ser abreviadas utilizando o atributo transition.

Abaixo alguns exemplos de utilização

<style>.exemplo1{display: inline-block;border: 1px dashed #000;padding: 10px;background: #ffffa2;height: 20px;opacity: 0.3;-moz-transition: height 1s ease-out, opacity 1s ease;-webkit-transition: height 1s ease-out, opacity 1s ease;-o-transition: height 1s ease-out, opacity 1s ease;transition: height 1s ease-out, opacity 1s ease;} .exemplo1:hover {height: 70px;opacity: 1;}.exemplo2 {position: relative;display: inline-block;border: 1px dashed #000;padding: 10px;background: #ffffa2;height: 20px;opacity: 0.3;margin:0 0 0 20px;text-decoration: none;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}.exemplo2:hover {opacity: 1;-moz-transform: scale(2) rotate(30deg) translate(50px);-webkit-transform: scale(1.2) rotate(30deg) translate(50px);-o-transform: scale(2) rotate(30deg) translate(50px);transform: scale(2) rotate(30deg) translate(50px);z-index: 1000;}</style>

Veja o Resultado:

Essas propriedades podem ser aplicadas a diversos tipos de elemetos como divs, links, imagens, backgrounds e muitos outros. Vejamo abaixo um exemplo de Transition em um link: 

<style>a.exemplo {width:200px;height:40px;margin:20px 0;text-align:center;padding-top:10px;border:3px solid #060;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;font: bold 24px Arial,sans-serif;display:block;background: #9CC;color:white;-webkit-transition:all 1s linear;-moz-transition: all 1s linear;-o-transition: all 1s linear;transition: all 1s linear;}a.exemplo:hover {background: #F66;color: #FF9;border:3px solid #69F;-webkit-transition:all 1s linear;-moz-transition: all 1s linear;-o-transition: all 1s linear;transition: all 1s linear;}</style>

Veja o Resultado:

Assine nosso feeds e receba notícias todas semanas