Animate with Transforms for Great CPU Success

I'm currently animating a bunch of clouds across a sky, for a thing, doesn't matter. I was previously animating with:

@keyframes cloud {
  0% {
    margin-left: 100vw;
  }
  100% {
    margin-left: -30vw;
  }
}

10 clouds ate about 70-75% of my CPU. When I switched to transform instead, my CPU usage dropped to about 20%:

@keyframes cloud {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-30vw);
  }
}

So: animate with transforms whenever possible to save the planet.

Tweet