Módulo Transition com CSS3
CSS - Utilizando módulo Transition com CSS3Informaçã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:
<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:WebCis
Criação e Diagramação
