Transition Performance
Only transform and opacity are fully GPU-composited and guaranteed to be jank-free. Properties that affect layout (width, height, top, left) trigger expensive reflows.
CSS
Intermediate
5 min read
CSS Transition Performance
Example
/* GOOD: GPU-accelerated properties */
.good {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.good:hover { transform: translateY(-4px); opacity: 0.9; }
/* AVOID: layout-triggering properties */
.bad {
transition: top 0.3s, width 0.3s; /* triggers layout */
}
/* Use will-change for complex transitions */
.heavy { will-change: transform; } Pro Tip
Check chrome://tracing or DevTools Performance panel to verify your transitions are hitting 60fps.