CSS

`css/animate-composited`

Animations and transitions change transform and opacity, not layout properties such as width, height, top, left or margin.

moderatestaticfe-motion

Why

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.

Fix

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.

Examples

/* 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; }

Sources

Facts

Id: css/animate-composited
Severity: moderate
Check: static checked in the source by audit
Applies to: css scss less html vue svelte astro
Taught by the skill: fe-motion Motion and animation
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

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