Módulo Transitions das CSS3

Publicado em: 14/09/2010 | Atualizações: 16/05/2014 — 29/05/2015

Introdução

O Módulo CSS Transitions Module Level 3 encontra-se na fase de Rascunho de Trabalho do W3C, contudo já foi implementado pelos navegadores modernos, e para alguns navegadores antigos com uso de prefixos proprietários (-moz-, -webkit-, -o-).
Confira o suporte para esse Módulo conforme mostrado no quadro a seguir (fonte: caniuse.com)
Coloque o mouse sobre o quadro para ampliá-lo.

Tabela de suporte para transition nos navegadores modernos

O objetivo do Módulo é fornecer mecanismos que permitam a mudança de estilização de um elemento HTML de uma forma suave e controlada no tempo. A ampliação do quadro de suporte que você acaba de ver foi obtida com uso das propriedades do Módulo, fazendo-se uma transição suave, de duração igual a 1 segundo, das propriedades CSS width e height da imagem do quadro.

Como funciona

Visualize os exemplos a seguir em um navegador que suporte o Módulo Transitions das CSS3 conforme mostrado no quadro de suporte.

O caso mais simples e que bem ilustra o funcionamento da transição de estilo é 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, como mostrado a seguir.

Coloque o ponteiro do mouse sobre o link.

Site do Maujor

Nesse exemplo o efeito de mudança de estilização do link (cores de fundo, do texto e da borda) se faz de forma instantânea. A proposta do Módulo Transitions é fazer a mudança de estilização de uma forma suave e controlada como mostrado a seguir.

Coloque o ponteiro do mouse sobre o link.

Site do Maujor

Propriedades CSS3 para transition

transition-property

Essa propriedade define a(s) propriedades CSS as quais será(ão) aplicada(s) a(s) transição(ões). Observe os exemplos a seguir

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 o tempo de duração da transição em segundos. Observe os exemplos a seguir

seletor {transition-duration: 2s }
seletor {transition-duration: 3s }
seletor {transition-duration: 6s }

transition-timing-function

Essa propriedade 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. Por exemplo: ease-in define uma transição que começa lentamente e acelera no final.
Observe os exemplos a seguir

seletor {transition-timing-function: linear }
seletor {transition-timing-function: ease-in-out }
seletor {transition-timing-function: bezier-cubic(0.3,0.7, 1.0, 0.8) }

transition-delay

Essa propriedade define o tempo de espera em segundos para início da transição. Observe os exemplos a seguir

seletor {transition-delay: 2s }
seletor {transition-delay: 1s }
seletor {transition-delay: 3s }

transition

Essa é a forma abreviada para as propriedades de transição mostradas anteriormente. Observe os exemplos a seguir

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

Exemplos

Exemplo 1

Coloque o ponteiro do mouse sobre o link a seguir

Site do Maujor

Observe a marcação HTML e regras de estilo para fazer a transição do link para o Site de Maujor mostrado anteriormente.

HTML

<a href="http://www.maujor.com" class="demo">Site do Maujor</a>

CSS

a.demo {
	width:200px;
	height:66px;
	margin:20px 0;
	text-align:center;
	padding-top:10px;
	border:8px solid;
	border-color:black;
	text-decoration:underline;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	font: bold 24px Arial,sans-serif;
	display:block;
	background:red;
	color:white;
	
	-webkit-transition:	all 2s linear;
	-moz-transition: all 2s linear;
	-o-transition: all 2s linear;
	transition: all 2s linear;
}

a.demo:hover {
	background:black;
	color:yellow;
	border-color:green;
}

Exemplo 2

Entre no campo de texto a seguir

Observe a marcação HTML e regras de estilo para fazer a transição do fundo do campo de texto mostrado anteriormente.

HTML

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

CSS

input.demo2 {
	display:block;
	width:200px;
	background:#eee;
	border:2px solid red;
	-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;
  }
input.demo2:focus {
	background:#ff0;
	border-color:black;
	}

Exemplo 3

Clique o DIV a seguir. Clique também ao final da transição

Nesse exemplo usamos JavaScript para atrelar o evento click no DIV. Esse evento irá disparar a mudança de estilização acresentando e retirando uma classe ao DIV.

Observe o script, a marcação HTML e regras de estilo para fazer a transição da margem esquerda e da cor de fundo do DIV mostrado anteriormente. Notar que usamos a propriedade transition-delay para fazer a mudança da cor de fundo tão logo tenha sido feita a mudança da margem esquerda do DIV.

JavaScript

<script type="text/javascript">
window.onload = function() {
var divTres = document.getElementById("demo3");
divTres.onclick = function() {
if (this.className == "cordiv") {
	this.className = "";
	} else {
	this.className = "cordiv"
	}
} 
}
</script>

HTML

<div id="demo3"></div>

CSS

div#demo3 {
	width:50px;
	height:50px;
	background:red;
	border:5px solid black;
	-webkit-transition: margin-left 2s linear, background 3s  linear 2s;
	-moz-transition: margin-left 2s linear, background 3s  linear 2s;
	-o-transition: margin-left 2s linear, background 3s  linear 2s;
	transition: margin-left 2s linear, background 3s  linear 2s;
	}
#pagebody #content .cordiv {
	background:yellow;
	margin-left:600px;	
	-webkit-transition: margin-left 2s linear, background 3s linear 2s;
	-moz-transition: margin-left 2s linear, background 3s linear 2s;
	-o-transition: margin-left 2s linear, background 3s linear 2s;
	transition: margin-left 2s linear, background 3s linear 2s;
	}

Nota: Neste tutorial mostrei os fundamentos das transições CSS. Espero ter motivado você a fazer experiências com essas funcionalidades, pois com o uso delas podem ser obtidos efeitos de alto impacto visual.