CSS Animations & GPU Accelerated Transitions (transform, opacity)
1Concept
CSS transitions on transform and opacity run directly on the GPU compositor thread without triggering layout reflow or repaint, maintaining 60/120 FPS.
2Architecture Diagram
CPU Reflow (Slow) : width, height, margin, top, left GPU Composite (Fast): transform (translate3d, scale), opacity (60/120 FPS)
3Code Example
Stage 0 Language Foundations
.interactive-button {
background: #6366f1;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
will-change: transform;
}
.interactive-button:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}4Expected Output
[Smooth 120 FPS hardware-accelerated button hover animation]
5Key Takeaways
- ✓Always animate 'transform' and 'opacity' to stay on the GPU compositor thread.
- ✓Never animate 'width', 'height', 'left', or 'margin' in continuous transitions.
- ✓will-change promotes elements to dedicated GPU layers.