Language 8 of 10 · Topic 0.8

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.