If you animate things like opacity or transform, the animation will be done by the GPU, which is super performant with those kinds of things. But as the GPU and CPU render things slightly different you will get this small snap when things get handed over. The will-change property will tell the browser that we will animate this object and therefore the GPU will handle it from the beginning, removing any of those glitches. Ha!
.object-to-animate {
will-change: transform;
}Code language: CSS (css)Learned this and some more in this great intro to CSS animation by Josh Comeau