Módulo Transitions das CSS3

Introdução

O Módulo CSS Transitions Module Level 3 (link abre em nova janela) 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) (link abre em nova janela)
Coloque o mouse sobre a imagem mostrada a seguir para ampliá-la e observar ao vivo uma transição.

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, para as 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.

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.

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: border, color; /* transição na borda 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 */

Propriedades CSS possíveis de serem animadas

Nem todas as propriedades CSS são animáveis, por exemplo: você não conseguirá animar as propriedades display, background-image, line-height, text-decoration entre outras

Consulte a lista das propriedades CSS possíveis de serem animadas (link abre em nova janela)

Exemplos

Exemplo 1

Coloque o ponteiro do mouse sobre o link a seguir

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

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

a.demo {
	width:200px;
	height:66px;
	margin:20px 0;
	text-align:center;
	padding-top:10px;
	border:8px solid;
	border-color:black;
	text-decoration:underline;
	border-radius:10px;
	font: bold 24px Arial,sans-serif;
	display:block;
	background:red;
	color:white;
	
	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.

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

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

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

div#demo3 {
	width:50px;
	height:50px;
	background:red;
	border:5px solid black;
	transition: margin-left 2s linear, background 3s  linear 2s;
	}
#pagebody main.main .cordiv {
	background:yellow;
	margin-left:600px;	
	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.

Compartilhe essa matéria com seus amigos