Why is this CSS Translate3d Animation Janky?

Question

I can't figure out why the performance of this css transition using a hardware accelerated property transform: translate3d(); is not working smoothly. Perhaps because the elements are absolutely positioned? I don't know...

CodePen Link

Can someone please explain to me why and how to fix? You can see the bad performance if you use Chrome's dev tools -> timeline, record, then run the animations by click the screen.

Here is a screencap of my dev tools.

Answer 1

Your columns aren't broken out of the document flow. You can see the horizontal scrollbar in the initial state. Try adding the following code to ensure they aren't triggering a redraw and scroll.

.columns {
  overflow:hidden;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}