Estamos acostumados a dar algum destaque em elementos da página que usuário pode interagir como links e campos de texto. Geralmente apenas trocamos a cor da letra, background ou o sublinhado do texto. Para isso simplesmente alteramos a propriedade em questão no seletor da pseudo classe :hover e com isso o alteração da propriedade é instantânea. Mas muitas vezes queremos que esta alteração seja mais suave, levando mais tempo para ocorrer e para isso podemos utiliza a propriedade transition.

Para configurarmos a propriedade transition devemos configurar no mínimo duas propriedades transition-property e transition-duration. Também podemos utilizar as propriedades transition-timing-function e transition-delay que permitem um melhor controle de como a transição ocorre. Vejamos um pouco mais detalhadamente cada propriedade.

transition-property: defina qual propriedade terá o efeito de transição. Ela é obrigatória pois se não for informada nenhuma propriedade não existirá o efeito de transição. Caso quisermos para mais de uma propriedade devemos separa-las por vírgula, ou no caso de queremos colocar o efeito em todas as propriedade utilizamos o valor all.

transition-property: color;

Segue uma lista das propriedade que aceitam o efeito de transição:

• background-color
• background-position
• border-bottom-color
• border-bottom-width
• border-left-color
• border-left-width
• border-right-color
• border-right-width
• border-spacing
• border-top-color
• border-top-width
• bottom
• clip
• color
• font-size
• font-weight
• height
• left
• letter-spacing
• line-height
• margin-bottom
• margin-left
• margin-right
• margin-top
• max-height
• max-width
• min-height
• min-width
• opacity
• outline-color
• outline-width
• padding-bottom
• padding-left
• padding-right
• padding-top
• right
• text-indent
• text-shadow
• top
• vertical-align
• visibility
• width
• word-spacing
• z-index

transition-duration: define qual a duração do efeito em segundos, sendo “0″ o valor padrão. Lembrando que também é obrigatório pois com o valor de “0″ segundos troca é imediada e não haverá efeito nenhum.

transition-duration: 2s;

transition-delay: define quanto tempo irá demorar em segundos para o efeito de transição começar a acontecer. O padrão é 0.

transition-delay: 5s

transition-timing-function: define a curva de transição, ou seja permite que o efeito de transição mude de velocidade enquanto está acontecendo. Os valores aceitos para esta propriedade são:

linear: a transição começa e termina na mesma velocidade. (equivalente a cubic-bezier(0,0,1,1) )

• ease a transição começa devagar, acelerar e termina lentamente. (equivalente a cubic-bezier(0.25,0.1,0.25,1))
• ease-in a transição começa devagar. (equivalente a cubic-bezier(0.42,0,1,1))
• ease-out a transição termina devagar. (equivalente a cubic-bezier(0,0,0.58,1))
• ease-in-out a transição começa devagar e termina devagar. (equivalent to cubic-bezier(0.42,0,0.58,1))
• cubic-bezier(n,n,n,n) permite a própria curva. Talvez este site ajude.

Bom a propriedade transition-timing-function é um pouco difícil de entender, então veja um exemplo da diferença de valores

Vejamos agora uns exemplos simples.

<h1 id="e1">Exemplo 1</h1>

...

h1#e1{
	color:#00C;
	transition-property: color;
	transition-duration:2s;
}
h1#e1:hover{
	color:#C00;
}

Como podemos ver é uma simples troca de cor do texto do titulo, o nosso titulo “e1″ terá a cor do texto azul, depois definimos que a propriedade color sofrerá transição quando for alterada, na linha seguinte definimos que esta transição levará ao todo 2 segundo. No seletor hover simplesmente alteramos o valor da propriedade.

<h1 id="e2">Exemplo 2</h1>

...

#e2{
	background:#F00;
	color:#FFF;
	transition-property: color , background;
	transition-duration:2s;
}
#e2:hover{
	background:#00C;
	color:#000;
}

Este exemplo é praticamente igual ao anterior, a não ser que colocamos o efeito de transição em duas propriedades.

<div id="e3">
	<h1>Um castelo</h1>
</div>

...

#e3{
	width:300px;
	height:225px;
	background-image: url(castelo.jpg);
	color:#FFF;
}

#e3 h1{
	width:300px;
	height:225px;
	background:rgba(0,0,0,.5);
	opacity: 0;

	transition-property: opacity;
	transition-duration:1s;
}
#e3:hover h1{
	opacity: 1;
}

Este efeito é um pouco mais interessante, quando o mouse passar por cima de nosso div “e3″ irá aparecer nosso titulo sobre ele com uma transparência.

Veja os três exemplo funcionando aqui.

Não esquecendo que podemos encurtar um pouco a sintaxe colocando todas as propriedades em uma linha

 transition: |property| |duration| |timing-function| |delay|; 

Esta propriedade pode ser muito interessante para quem tiver criatividade, como podem ver nos meus exemplos, eu não tenho