
Dicas para Criação e de sites
Módulo Transition com CSS3
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:
WebCisCriação e Diagramação
Assine nosso feeds e receba notícias todas semanas
Últimos Clientes
[veja todos]

Miafi Inventários

Oxilomer
