Why it matters
transition: all animates every property that changes, including layout properties you did not intend, and makes transitions harder to reason about.
How to fix it
List the properties explicitly and keep them compositor-friendly.
Example
.btn { transition: background-color 150ms var(--ease-out), transform 150ms var(--ease-out); }More smoothness rules
void smooth reports 13 rules in this category. How the page feels after it loads: dropped frames during a scripted scroll, long animation frames, INP of real clicks, shifts after input, animated layout properties, idle rAF loops and reduced-motion handling.
inp-slowInteractions are slow to respond (INP)layout-shift-after-inputLayout shifts long after an interactionlayout-shift-on-scrollLayout shifts while scrollinganimate-layout-propertyAnimation of a layout-triggering propertywill-change-overusewill-change is applied too broadlyreduced-motion-ignoredAnimations keep running with prefers-reduced-motionraf-loop-idlerequestAnimationFrame loop runs while idlescroll-timeline-no-fallbackContent is invisible without scroll-driven-animation support