Animação de um Carro com CSS3
Postado por: Pedro Rogério em
Com CSS3 será possível criar pequenas animações através de HTML e CSS usando a propriedade transition. Partindo desse princípio, o desenvolvedor Koller Jürgen criou uma simples animação de um carro que “passeia” pela tela quando o usuário coloca o mouse sobre ele. O código é muito simples e bastam apenas 2 imagens para obter o resultado final:
<a href="#"> <img src="car.jpg" /> <!--Imagem do carro--> <img src="gear.png" /> <!--Imagem da roda--> <img src="gear.png" /> <!--Imagem da roda--> </a>
Após basta definir algumas regras no CSS:
/* Velocidade da animacao */
img{
-webkit-transition: all 3.1s ease-in-out;
transition: all 3.1s ease-in-out;
}
/* Animacao do Carro */
a:hover img:nth-of-type(1) {
-webkit-transform: translate(700px,0px) rotate(0deg);
transform: translate(700px,0px) rotate(0deg);
}
/* Animacao das rodas */
a:hover img {
-webkit-transform: translate(700px,0px) rotate(1000deg);
transform: translate(700px,0px) rotate(1000deg);
}
Agora o resultado final. Artigo original: CSS3 Car Animation
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Legal!
Mas, CSS3, pelas minhas contas, somente daqui a 2 ou 3 anos.
Realmente Incrível o poder das CSS3!
Diz que é coisa pra só daqui há um tempo, mas começo a estudar agora mesmo!
O css3 eh muito poderoso, incrivel
mas nao acho q so daki a uns anos nao
pq todos navegadores hj aceitam o css3 (com alguns erros)
com excecao do IE, q ja ja lanca o IE9 q vai ser compativel com CSS3
acho q ano q vem ja vai ser totalmente aceito
Como salvo a animação no meu computador?
é eu acho que os tecnicos da adobe vao ter que mudar a perspectiva dos plugins deles e fazer um flash sem plugin e sem lag gostei da animaçao perfeita quero começar a estudar quando começei a ler o artigo até tava desanimado pois tinha lido em outro site que nao era reconhecido no chrome e firefox nem no ie e eu uso o chrome e acabei de ver a animaçao funfando tranquila numa nice quero estudar e agora hehehe.
Aqui funciona legal, e para a surpresa geral, eu estou usando android (milestone)
esse css3 tem tudo para desbancar o flash
Não sei se tem haver com a ultima versão do chrome 14.0.835.186 mas agora
pra mim não está mais funcionando .. eu usava pra outro fim essa animação.. agora fuuu =(
alguém viu isso?