---
title: "transition-all (ui/transition-all)"
description: "Every changing property animates, including layout and theme colors, and the browser can't skip work."
url: http://localhost:4173/rules/ui/transition-all
updated: 2026-11-11
---

# transition-all

> `ui/transition-all` is a vetd rule. It flags: transition-all. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `ui/transition-all` |
| Severity | warning |
| Group | Interface craft: accessibility, motion and mobile |
| Tags | performance |

## Why it matters

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

## How to fix it

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

## Credit

Based on work by:

- [Vercel](https://vercel.com): The Web Interface Guidelines say never to use transition: all and to list properties explicitly.

## References

- [transition-property CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-property), MDN Web Docs
- [Stick to compositor-only properties and manage layer count](https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count), web.dev
- [Web Interface Guidelines](https://github.com/vercel-labs/web-interface-guidelines), Vercel (vercel-labs)

## See it

Demos in the vetd Lab:

- [Animate transform and opacity](http://localhost:4173/lab/web-guidelines/motion-compositor-and-reduced)

## Related rules

- [`ui/theme-switch-transitions`](http://localhost:4173/rules/ui/theme-switch-transitions.md)
- [`ui/hover-font-weight`](http://localhost:4173/rules/ui/hover-font-weight.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "ui/transition-all" }`. CLI: `npx vetd explain ui/transition-all`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`ui/outline-none`](http://localhost:4173/rules/ui/outline-none.md) · Next: [`ui/press-scale`](http://localhost:4173/rules/ui/press-scale.md)