css/animate-composited

Dlaczego

Changing width, height, top, left, margin or padding makes the browser recalculate layout and repaint on every frame, often for the whole page around the element. On a mid-range phone that drops frames, delays input and can count as layout shift. transform and opacity can be animated by the compositor without layout.

Poprawka

Move with translate/transform: translate(), resize visually with scale (with transform-origin), fade with opacity. For an expanding panel, animate grid-template-rows from 0fr to 1fr or use a clip, and keep the motion short. Only add will-change to fix a measured problem.

Przykłady

/* bad */
.drawer { left: -20rem; transition: left 0.3s; }
.drawer.is-open { left: 0; }
/* good */
.drawer { translate: -100% 0; transition: translate 0.3s; }
.drawer.is-open { translate: 0 0; }

Źródła

• web.dev, How to create high-performance CSS animations
• web.dev, Optimize Cumulative Layout Shift (animations)
• MDN, CSS performance optimization (animating on the GPU)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain css/animate-composited