GPU Animations

GPU Animations

All animations are GPU-composited, using only transform, opacity, and scale properties that run on the compositor thread.

Entry Animations with @starting-style

[data-command-dialog][data-state="open"] {
  @starting-style {
    opacity: 0;
    scale: 0.96;
    translate: 0 8px;
  }
  opacity: 1;
  scale: 1;
  translate: 0 0;
  transition:
    opacity 200ms linear(...),
    scale 250ms linear(...),
    translate 250ms linear(...),
    display 250ms allow-discrete;
}

@starting-style defines the initial animation state, enabling CSS-only entry animations without JavaScript.

Spring Easing via linear()

/* Critically-damped spring approximation */
--ease-spring: linear(
  0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%,
  1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%,
  1.129 32%, 1.051 36.4%, 1.017 38.8%, 0.991, 0.977 43%, 0.974 44.8%,
  0.975 47.2%, 0.997 53.3%, 1.003 55.5%, 1.003 58.1%, 1 63.2%, 0.999 70.2%, 1
);

This linear() function approximates a physically-accurate spring with slight overshoot.

Scroll-Driven Animations

[data-command-list] {
  scroll-timeline: --list-scroll block;
}

/* Top fade — appears as you scroll down */
[data-command-list]::before {
  animation: fade-edge-top linear both;
  animation-timeline: --list-scroll;
  animation-range: 0px 24px;
}

Display Transitions

transition: display 250ms allow-discrete;

transition-behavior: allow-discrete allows smooth transitions for display: none ↔ display: block.

Performance Techniques

Technique	CSS Property	Purpose
Layer promotion	will-change: transform	Creates GPU layer
Rendering containment	contain: layout style paint	Isolates repaint boundaries
Off-screen skip	content-visibility: auto	Skips rendering for off-screen items
Intrinsic sizing	contain-intrinsic-size: auto 44px	Provides estimated size for skipped items

Reduced Motion

All animations are disabled when the user prefers reduced motion:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}