Dicas para Criação e 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