transition-behavior 是 CSS 工作草案中的废弃提案，截至 2024 年中未被任何主流浏览器实现，MDN 无文档，@supports 检测返回 false；实际需用 steps(1, start) 配合 opacity/transform 等可动画属性模拟离散切换。

transition-behavior 目前（截至 2024 年中）**根本不存在于任何主流浏览器中，也不是 CSS 规范的正式属性**。你查不到它的 MDN 文档，transition-behavior 会直接被浏览器忽略，写上去毫无效果。

为什么搜到“transition-behavior”却配不出离散过渡？

你很可能看到的是 CSS 工作草案（如 CSS Transitions Level 2）里曾短暂讨论过的实验性提案，或某些前端文章误传/混淆了概念。该提案从未进入实现阶段，Chrome、Firefox、Safari 均未启用，也未在 @supports 中声明支持。

常见错误现象包括：

• 写了 transition-behavior: allow-discrete; 但过渡依然平滑或完全不触发
• DevTools 的 Styles 面板里该属性显示为“invalid”或直接灰掉
• @supports (transition-behavior: allow-discrete) 返回 false

真正能实现“离散过渡”（即跳变、无缓动）的可靠方式

所谓“离散”，本质是让过渡在起点和终点之间**不插值**，而是立即切换。CSS 本身不提供“禁止插值”的开关，但可通过以下组合达成等效效果：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 用 transition-timing-function: step-start 或 step-end —— 适用于布尔类变化（如 visibility、display 模拟，但注意 display 本身不可过渡）
• 对支持离散动画的属性（如 opacity、transform），配 transition-timing-function: steps(1, start)，视觉上就是瞬切
• 避免对不支持插值的属性（如 height: auto、margin: auto）写 transition，否则过渡会静默失效
• 若需精确控制离散帧（如 UI 状态机切换），改用 @keyframes + animation，定义 0% 和 100% 两帧，配 animation-timing-function: step-end

哪些属性实际支持“看起来离散”的过渡？

不是所有属性都能被“离散化”。关键看它是否支持 CSS 插值（interpolation）：

• ✅ 可行：opacity、transform、color、background-color —— 配 steps(1, start) 能做到视觉瞬切
• ❌ 不可行：display、z-index、font-family —— 它们本身不可过渡，写 transition 无效；想切换得靠 JS 切 class 或用 visibility + opacity 组合模拟
• ⚠️ 有陷阱：height、width 若设为 auto，过渡会退化为无动画；必须用具体数值（如 px、rem）才可配合 steps() 使用

真正要实现离散状态切换，别找不存在的 transition-behavior，盯住 steps() 计时函数、选对可过渡属性、必要时用 animation 替代 transition —— 这些才是今天能落地的解法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！