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 🙁