CSS3 Car Animation

Mit der CSS3 Property transform (translate & rotate) und transition kann man ganz einfach simple Animationen erstellen. Derzeit funktioniert dies allerdings nur in der aktuellen Safari und Chrome Version. Hier nun ein ganz einfaches Beispiel einer kleinen Auto Animation...2 Bilder und ein bisschen CSS3 und schon fährt das Auto.

Example (Safari & Chrome only)

Check out the CSS3 Car Animation

HTML Code

<a href=""><strong>HOVER ME TO START THE CAR</strong>
<img src="car.jpg" width="300" height="164" /> //car image
<img src="gear.png" width="60" height="60" /> //gear image
<img src="gear.png" width="60" height="60" /> //gear image
</a>

Important CSS Parts

/* Define Animation Speed */
img{
-webkit-transition: all 3.1s ease-in-out;
-moz-transition: all 3.1s ease-in-out; 
transition: all 3.1s ease-in-out;
}

/* Car image Animation */
a:hover img:nth-of-type(1) {
-webkit-transform: translate(700px,0px) rotate(0deg); 
-moz-transform: translate(700px,0px) rotate(0deg); 
transform: translate(700px,0px) rotate(0deg);
}

/* Gear images Animation */
a:hover img {
-webkit-transform: translate(700px,0px) rotate(1000deg); 
-moz-transform: translate(700px,0px) rotate(1000deg); 
transform: translate(700px,0px) rotate(1000deg);
}

 

3 Kommentare »

mment schrieb am 18. Februar 2010 um 16:36

Coole Sache!

mment schrieb am 19. Juni 2010 um 10:46
Jürgen Koller schrieb am 4. Juli 2010 um 17:43

Hi, ja sehr nette Sache der Contest - leider keine Zeit dafür :)

Kommentar schreiben

(erforderlich)

(required but will not be published)

(if you have one)

Bild einfügen:<img src="http://www.website.com/meinbild.jpg" alt="bildbeschreibung" />


 
Produced and © by Koller Jürgen | Impressum | Love and Joy to everyone