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 本身不提供“禁止插值”的开关，但可通过以下组合达成等效效果：
立即学习“前端免费学习笔记（深入）”；
- 用
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 —— 这些才是今天能落地的解法。
