---
title: "`transition: all` / `transition-all` (lint/transition-all)"
description: "lint/transition-all: Transitioning `all` animates properties you never meant to (layout, colors on theme switch, box-shadow), triggers layout/paint work on…"
canonical: https://void-design.vercel.app/rules/lint/transition-all
lastModified: 2026-09-16
---

# `transition: all` / `transition-all`

`lint/transition-all` · severity **warn** · category Lint · detected by `void lint` and `void audit`

## Why it matters

Transitioning `all` animates properties you never meant to (layout, colors on theme switch, box-shadow), triggers layout/paint work on every change and makes motion feel mushy.

## How to fix it

List the properties: `transition-[transform,opacity]`, `transition-colors`, `transition-transform`, or `transition: transform 160ms var(--ease-out), opacity 160ms`.

## Example

```tsx
<button className="transition-[transform,background-color] duration-150 ease-out active:scale-[0.97]" />
```

## References

- https://tailwindcss.com/docs/transition-property

## More lint rules

`void lint` reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.

- `unload-listener` `unload` event listener — [lint/unload-listener](https://void-design.vercel.app/rules/lint/unload-listener)
- `useeffect-fetch` Page fetches its data in `useEffect` — [lint/useeffect-fetch](https://void-design.vercel.app/rules/lint/useeffect-fetch)
- `div-button` Clickable `<div>`/`<span>` without button semantics — [lint/div-button](https://void-design.vercel.app/rules/lint/div-button)
- `dangerously-set-jsonld-unescaped` JSON-LD injected with `JSON.stringify` without escaping `<` — [lint/dangerously-set-jsonld-unescaped](https://void-design.vercel.app/rules/lint/dangerously-set-jsonld-unescaped)
- `animate-layout-prop` Animation of layout properties (width/height/top/left/margin/padding) — [lint/animate-layout-prop](https://void-design.vercel.app/rules/lint/animate-layout-prop)
- `outline-none-no-replacement` Focus outline removed without a visible replacement — [lint/outline-none-no-replacement](https://void-design.vercel.app/rules/lint/outline-none-no-replacement)
- `scale-zero-entry` Element enters from `scale(0)` — [lint/scale-zero-entry](https://void-design.vercel.app/rules/lint/scale-zero-entry)
- `scroll-timeline-no-fallback` Base rule hides an element; only an `@supports (animation-timeline: …)` block undoes it — [lint/scroll-timeline-no-fallback](https://void-design.vercel.app/rules/lint/scroll-timeline-no-fallback)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/transition-all`