Ian McFarlan

Smoothing CSS3 Animations

10 Jul 2011

I posted this tweet while working on a project that involved heavy CSS3 animations. When creating simple animation that only impacts a small element, I found you could usually get away with a simple 2D based transform value.

/* translate(X,Y); */
-webkit-transform: translate(100px, 200px);
-moz-transform: translate(100px, 200px);
transform: translate(100px, 200px);

However, when moving large objects or moving many objects these 2D transforms just don’t cut it. The animations were choppy and sometimes crashed the browser. To smooth out these transforms I applied a 3D based transform.

/* translate3D(X,Y,Z); */
-webkit-transform: translate3D(100px, 200px, 0);
-moz-transform: translate3D(100px, 200px, 0);
transform: translate3D(100px, 200px, 0);

By implementing 3D based transforms, you’re able to take advantage of hardware acceleration. Unlike their ugly 2D cousins, 3D based transforms utilize your computer’s hardware, specifically the graphics card, to assist in the animation.

Reference Links

Some reference links that I found handy when digging a bit deeper into this issue and fix.

My name is Ian McFarlan and I have been a web developer since 2003. I’ve mainly worked in client services and advertising but lately I have been getting my hands dirty with product development.

Work | About | Contact

More Articles