Módulo Animations das CSS3

Publicado em: 17/02/2012

Introdução

O Módulo CSS Animations Module Level 3 encontra-se na fase de Rascunho de Trabalho do W3C, contudo foi implementado pelos navegadores modernos com uso de prefixos proprietários (-moz-, -webkit-, -o-, -ms-) a ser acresentado no início dos nomes das propriedades CSS previstas no Módulo.
O suporte para esse Módulo, à época que o tutorial foi escrito, é mostrado no quadro a seguir. A qualquer momento consulte o site caniuse.com, do qual o quadro foi transcrito para saber sobre o suporte em datas futuras.

Propriedade	Tipo de valor
background-color	cor
background-image	somente gradientes
background-position	porcentagem, medida CSS
border-bottom-color	cor
border-bottom-width	medida CSS
border-color	cor
border-left-color	cor
border-left-width	medida CSS
border-right-color	cor
border-right-width	medida CSS
border-spacing	medida CSS
border-top-color	cor
border-top-width	medida CSS
border-width	medida CSS
bottom	medida CSS, porcentagem
color	cor
crop	rectangle
font-size	medida CSS, porcentagem
font-weight	número
grid-*	vários
height	medida CSS, porcentagem
left	medida CSS, porcentagem
letter-spacing	medida CSS
line-height	número, medida CSS, porcentagem
margin-bottom	medida CSS
margin-left	medida CSS
margin-right	medida CSS
margin-top	medida CSS
max-height	medida CSS, porcentagem
max-width	medida CSS, porcentagem
min-height	medida CSS, porcentagem
min-width	medida CSS, porcentagem
opacity	número
outline-color	cor
outline-offset	no.inteiro
outline-width	medida CSS
padding-bottom	medida CSS
padding-left	medida CSS
padding-right	medida CSS
padding-top	medida CSS
right	medida CSS, porcentagem
text-indent	medida CSS, porcentagem
text-shadow	shadow
top	medida CSS, porcentagem
vertical-align	keywords, medida CSS, porcentagem
visibility	visibility
width	medida CSS, porcentagem
word-spacing	medida CSS, porcentagem
z-index	no.inteiro
zoom	número

Como funciona?

Para entender o princípio básico do funcionamento de animações com uso de CSS vamos partir de um exemplo prático bem simples. Observe o objeto animado mostrado a seguir. Trata-se de uma animação cujo ciclo completo é constituído pelo deslocamento para a direita de um círculo na cor vermelha. Durante o deslocamento a cor e a forma do objeto se modificam para a cor azul e a forma quadrada. Terminado um ciclo, inicia-se outro e assim indefinidamente.

Animar Parar animação

Vamos interpretar essa animação segundo um linguajar CSS dizendo o seguinte:

Um elemento div com dimensões definidas (width e height), cor de fundo vermelha (background-color) e cantos arrendondados com raio igual à metade do lado (border-radius) tomou a forma de um círculo colocado em uma posição inicial (position e left). O elemento div foi retirado da sua posição inicial ao longo de um tempo alterando-se sua propriedade left. Durante o intervalo de tempo alterou-se também a cor (background-color) e o raio do canto arredondado (border-radius).

Animação CSS é exatamente isso: Alteração de propriedades CSS ao longo do tempo.

No exemplo mostrado as propriedades CSS alteradas ao longo do tempo foram:

• left
• border-radius
• background-color

A estilização inicial do elemento div é conforme mostrado a seguir:

div {
	width:40px;
	height:40px;
	position:relative;
    left:0;
	background-color:red;
	border-radius:20px;
	}

Notar que "animamos" (alteramos ao longo do tempo) 3 propriedades CSS simultaneamente. Observe como se dá a animação de cada uma das propriedades isoladamente:

Regra @keyframes nome_da_animação