Banner propaganda da DevMedia - Cursos de desenvolvimento web

Módulo Transitions das CSS3

visualizações (desde 24/03/2018) Publicado em: 14/09/2010 | Atualizações: 16/05/2014 — 29/05/2015 — 24/03/2018

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.

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

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: 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

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;
	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.

HTML

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

CSS

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>

HTML

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

CSS

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

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo