Simple demo of requestAnimationFrame.
Use CSS keyframe animation or CSS transitions and transforms so that the browser can optimize painting/compositing.
Use requestAnimationFrame
for JS-based animation control.
Further, Paul Irish suggests …
Avoid changing inline styles on every frame (jQuery animate()-style) if you can, declarative animations in CSS can be optimized by the browser way more.
Use CSS transforms instead of absolute positioning will typically provide better FPS by way of smaller paint times and smoother animation.
Use Timeline Frame’s mode to investigate what is slowing down your behavior.
Lastly …
“Show Paint Rects” and “Render Composited Layer Borders” are good pro-moves to verify where your element is being rendered.