will-change tells the browser to promote an element to its own compositor layer before the animation starts, which removes the stutter on the first frame. The advice usually stops there, and that is where the trouble begins.
/* wrong: every card gets a permanent layer */
.card { will-change: transform; }
/* right: promote on intent, release afterwards */
.card:hover { will-change: transform; }Each promoted layer costs GPU memory, and a list of two hundred cards each holding a layer will make the whole page slower than the jank it was meant to fix — on mobile it can crash the tab. Apply it as close to the interaction as possible, and remove it when the animation ends. If a transform animation is already smooth, do not add it at all.