CSS no Lanche

Animações são possíveis utilizar em linguages como o SVG, não existindo de forma nativa no CSS. A proposta de CSS Animation introduzida no Webkit especifica os valores que o CSS terá após um determinado intervalo de tempo.

Através dessa proposta são utilizados os Keyframes, Animations, Animation behavior, Animation events para obter os mais variados tipos de comportamento através de CSS sem a utilização de JavaScript. Mas isso por enquanto é privilégio de browsers que utilizam como motor de renderização o Webkit(Safari, Google Chrome, Midori)

Pong com CSS

Todos já ouviram falar daquele famoso jogo chamado Pong? Se não fosse por ele os vídeo-games não chegariam ao nível que chegaram hoje. Vamos ver aqui um exemplo de como desenvolver esse jogo utilizando CSS Animation(O Jogo no exemplo é somente uma ilustração, a jogabilidade não existe).

Vamos fazer o uso de 3 animações simples, chamadas left, ball e right, movendo nossas “raquetes” para cima e para baixo e a bola para a direita e para a esquerda. A “raquete” da direita utiliza um Keyframe extra para abrandar um pouco mais o movimento para baixo:

@-webkit-keyframes left {
	from { top: 20px; }
	to { top: 150px; }
}
@-webkit-keyframes ball {
	from { left: 40px; top: 60px; }
	to { left: 340px; top: 150px; }
 }
@-webkit-keyframes right {
	from { bottom: 120px; }
	50% { bottom: 60px; }
	to { bottom: 40px; }
}

O estado :hover é responsável por fazer a chamada das animações:

#court:hover div {
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
#court:hover #paddle-left { -webkit-animation-name: left;  }
#court:hover #ball { -webkit-animation-name: ball; }
#court:hover #paddle-right { -webkit-animation-name: right; }

Não podemos deixar de mostrar um exemplo, mas atenção que você só irá conseguir ver a animação em browsers que utilizam o motor de renderização WebKit.

Esse post é uma adaptação do original: Broken Links.