Performance of moving image on web page via CSS vs HTML5 Canvas

Question

I have an image and move it around my web page (JavaScript) like this:

satelliteImage.style.top = coordinates.top + \"px\";
satelliteImage.style.left = coord         


        

Answer 1

Figured I'd update this old question with my findings on a 3rd generation iPad:

Canvas wins 2:1 with the sprite animations an average of about 120 fps with background clearing toggled both ways. CSS could barely meet 60 fps.

As for the single image, CSS was definitely quicker.