Paul, I noticed that you still used inline js ( onclick), does that mean that the animation would not work if js is turned off, or will it allow to call a CSS, as long as you arent running the call off a <script> tag?
You don’t really need to know much about hardware acceleration except that webkit uses it for the css3 animations to provide smooth effects without holding the page up. The animation is handled by the hardware and not the software.
There is a jquery plugin that will make use of this I believe but I haven’t tested it.
You should be able to do what you want with jquery but is really a question for the JS forum rather than here. I believe you can chain events like that with jquery and you could start another animation once the car reaches the right and then also swap the image at the same time and send the car down the page and so on.
In truth you would probably be better of with a purpose written script to do what you want rather than bolt together a number of jquery routines.
I would however like to extend this effect. Either make the car explode when it reachs 920px or make it rotate CCW 90 degress and drive down the border of the site… If the latter is possible do you think it would be possible to drive the car 360 around the whole wrapper border?
You can do a lot with hover but you have to remain hovered for it to work.
You can move it quite easily for safari using CSS3.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-webkit-transition: left 4s;
<h1>Click on car to start animation</h1>
<p class="car" onclick="this.style.left ='100%'"><img src="http://img687.imageshack.us/img687/8263/pixelcar.png" alt="car "width="75" height="24"></p>
<h1 class="hover">Hover on car to start animation</h1>
<p class="car car2"><img src="http://img687.imageshack.us/img687/8263/pixelcar.png" alt="car "width="75" height="24"></p>
CSS3 animations are best added where you don’t need to support other browsers and you add it as an enhancement for capable browsers so that they can have extra eye candy but you don’t add it when function is disadvantaged by it not being there.