Smoothing CSS3 Translate

filed in 'code'

Why is my animation choppy? -webkit-transform: translate3d() is hardware accelerated. Unlike its 2d cousin. #css3 #eurekamoment
@mcfarlan on 9 Aug

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. They are choppy and can sometimes crash the browser. To smooth out these transforms apply 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 – greatly increasing resources.