Conhecendo a propriedade Transitions em CSS 3

Neste artigo iremos conhecer e aprender como utilizar a propriedade transitions em css3 e assim poder criar algumas pequenas animações.

por Ricardo Arrigoni

Olá pessoal, no artigo de hoje vamos falar sobre uma nova propriedade de css3 que promete ser muito útil na criação de pequenas animações, estamos falando do CSS3 Transitions.

Existe um site muito útil para se descobrir se determinado navegador possui suporte para determinada propriedade ou seletor de css3, sugiro darem uma olhada no site http://www.findmebyip.com/litmus.

O objetivo do transitions é permitir que um elemento HTML possa ser estilizado suavemente e controlada no tempo.

Como funciona

O caso mais simples e que bem ilustra o funcionamento da propriedade é a mudança da estilização de um link quando o usuário coloca o ponteiro do mouse sobre ele. Em CSS2.1 o efeito é obtido com uso da pseudo-classe :hover.

Nesse caso o efeito de mudança de estilização do link ocorre de forma instantânea. Com o uso do Transitions, essa mudança é feita suavemente e de forma controlada, como podemos ver a seguir.

Clique aqui para ver os exemplos em funcionamento.

Agora vamos ver como tudo isso funciona.

Propriedades de Transição

transition-property

Essa propriedade define as propriedades CSS as quais serão aplicadas as transições. Observe os exemplos a seguir

Listagem 1: transition-property

seletor {
	transition-property: background-color; // transição na cor de fundo 
	}
seletor {
	transition-property: background-image, color; // transição na imagem de fundo e cor do texto
	} 
seletor {
	transition-property: all; // transição em todas as propriedades elegíveis para transição
	} 
seletor {
	transition-property: margin-left, font-size, color; // transição na margem esquerda, tamanho de fonte e cor do texto
	} 

transition-duration

Essa propriedade define quanto tempo, em segundos, a transição vai levar para acontecer. Observe os exemplos a seguir.

Listagem 2: transition-duration

seletor {transition-duration: 1s }
seletor {transition-duration: 5s }
seletor {transition-duration: 10s }

transition-timing-function

Essa propriedade vai definir como a transição vai ocorrer, que tipo de efeito de transição será aplicado, as opções possíveis são:

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• bezier-cubic

Cada uma delas define uma taxa de animação, veja alguns exemplos de como usá-las:

Listagem 3: transition-timing-function

seletor {transition-timing-function: linear }
seletor {transition-timing-function: bezier-cubic(0.1,0.4, 1.3, 0.6) }
seletor {transition-timing-function: ease-in-out }

transition-delay

Essa propriedade define o tempo de espera para o início da transição.

Listagem 4: transition-delay

seletor {transition-delay: 5s }
seletor {transition-delay: 2s }
seletor {transition-delay: 6s }

transition

Assim como na maioria das propriedades css podemos usá-las de forma abreviada, caso queira usar todas as propriedades mostradas anteriormente de forma abreviada, pode-se usar apenas transition, como podemos ver na listagem 5.

Listagem 5: transition

seletor {transition: color 1s ease-in 4s } // transição de cor em 1s, animação ease-in, tempo de retardo de 4s
seletor {transition: color 2s linear, border 4s linear; } // transição de cor em 2s e borda em 4s, animação linear

Exemplos práticos

Agora vamos mostrar alguns exemplos práticos de como utilizar a propriedade transitions em seus projetos.

Primeiro vamos fazer o exemplo que utilizamos no início desse artigo, para isso copie o código HTML.

Listagem 6: Código HTML

<a href="<http://www.linhadecodigo.com>.br" class="demo">Portal Linha de Código</a>

Agora copie o código css e veja o a “mágica” acontecer.

Listagem 7: Código CSS

<style type="text/css">
a.demo {
	width:150px;
	height:30px;
	margin:20px 0;
	text-align:center;
	padding-top:10px;
	border:4px solid;
	border-color:#5065ff;
	text-decoration:none;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	border-radius:5px;
	font: bold 16px Arial,sans-serif;
	display:block;
	background:$fff;
	color:#000;
	
	-webkit-transition:	all 2s linear;
	-moz-transition: all 2s linear;
	-o-transition: all 2s linear;
	transition: all 2s linear;
}

a.demo:hover {
	background:#000;
	color:#fff;
	border-color:#000d72;
	
	-webkit-transition:	all 2s linear;
	-moz-transition: all 2s linear;
	-o-transition: all 2s linear;
	transition: all 2s linear;
}
</style>

O resultado é o que já vimos no início do artigo:

Clique aqui para ver os exemplos em funcionamento.

Agora vamos ao exemplo 2:

Copie o código:

Listagem 8: Código HTML

<input type="text" class="demo2" />

Listagem 9: Código CSS

input.demo2 {
	display:block;
	width:300px;
	background:#878eff;
	border:2px solid #020287;
	}
input.demo2:hover {
	background:#ff0;
	border-color:#ff0303;
	-webkit-transition: background 2s linear, border 3s;
	-moz-transition: background 2s linear, border 3s;
	-o-transition: background 2s linear, border 3s;
	transition: background 2s linear, border 3s;
	}

O resultado será:

Clique aqui para ver os exemplos em funcionamento.

Esses foram alguns exemplos do que pode ser feito com a propriedade transitions do css3, fiquem a vontade de testarem todas as opções e caso tenham alguma dúvida é só postar nos comentários.

Espero que tenham gostado e até o próximo artigo.

Ricardo Arrigoni - Desenvolvedor Front-end.