Animation Performance
Animate only transform and opacity for guaranteed 60fps performance. Use will-change to hint the browser to promote elements to their own compositor layer.
CSS
Intermediate
5 min read
CSS Animation Performance Tips
Example
/* Performant: GPU composited */
@keyframes slide {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* Hint GPU compositing for complex animations */
.animated-card {
will-change: transform;
animation: slide 0.4s ease both;
}
/* Remove will-change after animation ends */
el.addEventListener("animationend", () => {
el.style.willChange = "auto";
}); Pro Tip
Do not add will-change to every element — it wastes GPU memory. Apply it only to elements with complex animations.