-
Notifications
You must be signed in to change notification settings - Fork 0
GPU Animations
ABCrimson edited this page Mar 7, 2026
·
1 revision
All animations are GPU-composited, using only transform, opacity, and scale properties that run on the compositor thread.
[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.
/* 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.
[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; }
transition: display 250ms allow-discrete;
transition-behavior: allow-discrete allows smooth transitions for display: none ↔ display: block.
| 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 |
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; } }