css transition简写声明后置覆盖前值，需合并为单条并显式指定delay；background等简写属性不可动画，应改用具体子属性；display:none禁用transition，宜用opacity+visibility组合。
transition简写声明被后置规则覆盖
浏览器只保留最后解析到的那条完整 transition 声明，前面所有声明（包括其中的 transition-delay）都会被丢弃。这不是 bug，是 CSS 简写属性的固有行为。
- 错误写法：两条独立
transition简写，第二条会重置 delay 为0s - 正确做法：合并成一条，用逗号分隔多个过渡项，并为每一项显式写出
delay - 示例：
.box { transition: background-color 0.3s ease 0.5s, transform 0.2s ease 0.5s; } - 如果某项不需要延迟，也得写成
0.2s ease 0s，不能省略
:hover 或媒体查询里漏掉 transition-delay
很多人只在默认状态写了带 delay 的 transition，却在 :hover 中只写 transition: opacity 0.3s——这等于把整条 transition 重置了，delay 自动变回 0s。
- 交互状态（
:hover、:focus、@media）中，只要需要延迟，就必须显式带上transition-delay - 更稳妥的方式是拆开写子属性：
transition-property、transition-duration等单独定义，避免简写覆盖 - DevTools 的 Styles 面板里点开“已计算”值，能直接看到哪条规则胜出、
transition-delay最终取的是哪个值
background 这类简写属性导致 transition 失效
background 是复合属性，浏览器无法对它做插值动画；哪怕写了 transition: background 0.3s，实际生效的只有 background-color 或 background-image 中可动画的部分，其余被忽略。
- 明确指定具体子属性，比如用
background-color替代background - 同理，
border、font、outline等简写都不建议直接用于transition-property - 检查
transition-property值是否为all：它会尝试动画所有可动画属性，但不可动画的（如display、z-index）仍无效，且可能拖慢性能
display: none 切换时 transition 完全不触发
display 是离散属性，浏览器不对它插值，设成 none 的瞬间元素就从渲染树移除，所有过渡逻辑终止——不是卡顿，是压根没启动。
- 改用
opacity+visibility组合：前者控制渐变，后者控制交互与占位 - 必须为
visibility显式声明transition，例如transition: opacity 0.3s, visibility 0s 0.3s - 若需释放布局空间，得额外加
max-height: 0或transform: scaleY(0)并配overflow: hidden - 屏幕阅读器仍会读取
visibility: hidden的内容，语义隐藏需同步加aria-hidden="true"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
