- Kollermedia.at - http://www.kollermedia.at -
CSS3 Car Animation
Posted By Jürgen Koller On 18. Februar 2010 @ 11:23 In Scripts etc. | 3 Comments
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.
Check out the CSS3 Car Animation [1]
<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>
/* 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);
}
Article printed from Kollermedia.at: http://www.kollermedia.at
URL to article: http://www.kollermedia.at/archive/2010/02/18/css3-car-animation/
URLs in this post:
[1] Check out the CSS3 Car Animation: http://www.kollermedia.at/wp-content/themes/kollermedia/specials/caranimation/index.html
Click here to print.
Copyright © Kollermedia.at. All rights reserved.