WebKit CSS transformations and animations in Javascript - iphone

Question

I'm working on a IPhone web application. I just starded playing with the webkit-transform and webkit-animation CSS rules. I've some questions: for example, is there real advantage in using these instead of, say, jQuery.animate(...)? The resulting animations don't seem to be that much accelerated and fast. Let's explain better: I've a series of images I have to move on the screen, like a gallery... I set each image CSS rules like this:
-webkit-transition-property: left, top, right, bottom, width;
-webkit-transition-duration: 200ms;
then I change the style.left and style.top of each element I want to move with new coordinates. The result is not so fast as I expected. It is fast more or less as jQuery is (not fluid at all). I've seen there is even -webkit-animation and -webkit-transform but I still don't understand how to use them properly. The first one lets me move things around, but doesn't generate an animation, I use the following code:
var trans = "translate(" + x + "px," + y + "px)";
ELEMENT.style.webkitTransform = trans;
with this the element moves around, but without an animation. If I create dynamically an animation with:
var lastSheet = document.styleSheets[document.styleSheets.length - 1];
lastSheet.insertRule("#-webkit-keyframes "+ "animX" + "{ from { top: "+oy+"px; left:"+ox+"px;} to {top: " + y + "px; left: " + x + "px; } }",lastSheet.cssRules.length);
ELEMENT.style.webkitAnimationName = "animX";
this way the element will move once, not so fludly, and well be back to it's old position. Repeating this code doesn't lead to anything.
What do you think, is there a real advantage in terms of fluidity of movement in using those? And if yes, how to use them properly?

Answer 1

Something like this should do what you want, and runs quite smoothly in Safari on my iPhone 4:
<style type='text/css'>
#element {
position: absolute;
top: 0px;
left: 0px;
-webkit-transition-property: top, left, bottom, right;
-webkit-transition-duration: 300ms;
-webkit-transition-timing-function: ease-in;
}
</style>
<script type='text/javascript'>
document.querySelector('#element').style.left = '300px';
</script>