I'm a programmer specialising in performant and scalable systems using PHP and Ruby and cooking


Published:

Animate translateX and not left with CSS

Some people have asked me about something I mentioned regarding CSS3 animations and efficient transforms.

I'm seeing a lot of people translating their CSS animations directly from jQuery and not taking any performance into consideration.

Fortunately I found a tweet from @johnallsopp that very simply highlights why you should be careful how you craft you animations:

"wow. Animate change to left via CSS, ~500 paint/reflow events. Animate translateX - 16!"

Some useful articles about reflow/repaint: