Skip to content

transition-all

ui/transition-allwarningperformance

Why it matters

Every changing property animates, including layout and theme colors, and the browser can't skip work.

Fix

Name the properties: transition-colors, transition-transform, transition-[transform,opacity].

Credit

From Vercel
The Web Interface Guidelines say never to use transition: all and to list properties explicitly.

References

transition-property CSS propertyMDN Web Docs
Stick to compositor-only properties and manage layer countweb.dev
Web Interface GuidelinesVercel (vercel-labs)

See it

Animate transform and opacity