transition简写会一次性覆盖所有子属性，必须按property/duration/timing-function/delay顺序写全，可省略后两项但不可跳写；多属性用逗号分隔，禁止单独设置子属性。
transition 简写语法怎么写才不被覆盖
直接说结论：transition 简写会**一次性覆盖所有子属性**，哪怕你只写其中一项，其他项也会重置为初始值（比如 transition-property: none）。这不是 bug，是 CSS 规范明确规定的“全有或全无”行为。
常见错误现象：你在某个元素上先写了 transition: all 0.3s ease;，后面又想单独加个 transition-delay: 1s; —— 结果发现延迟生效了，但过渡效果反而没了。原因就是第二次声明没带齐全部参数，property 被悄悄设回 none。
- 必须按固定顺序写全四个部分：
transition-propertytransition-durationtransition-timing-functiontransition-delay - 可以省略后两项（
timing-function和delay），但不能跳着写；例如transition: opacity 0.2s;是合法的，等价于opacity 0.2s ease 0s - 如果要过渡多个属性，用逗号分隔整个简写组：
transition: opacity 0.2s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); - 别混用简写和单个属性写法——浏览器会按层叠规则处理，但极易误判哪条生效
transition-property 设为 all 有什么隐患
transition: all 0.3s; 看起来省事，实际是埋雷第一现场。它会让所有可动画的 CSS 属性都参与过渡，包括你根本没打算动的那些。
典型问题场景：给按钮加 hover 效果时用了 all，结果用户鼠标划过时，box-shadow、border-color、background-color 全在动，甚至触发了 font-size（虽然不可动画，但浏览器仍尝试计算）导致 layout 波动。
立即学习“前端免费学习笔记（深入）”；
- 性能风险：某些属性（如
height、width、top）触发布局重排，all会让它们意外加入过渡队列 - 兼容性陷阱：旧版 Safari 对
all的解析更激进，连z-index都试图过渡（当然无效，但会多一次计算） - 维护困难：半年后你改了个
margin，发现它也跟着淡入淡出——因为没人记得当初写了all - 正确做法：显式列出需要过渡的属性，比如
transition: background-color 0.2s, transform 0.25s;
transition-timing-function 常见取值的实际表现差异
ease、linear、ease-in-out 这些关键字看着简单，但真实动效差别很大，尤其在短时长（
错误认知：“ease 就是缓入缓出”——其实它的贝塞尔曲线是 cubic-bezier(0.25, 0.1, 0.25, 1)，**起始比结束更“冲”**，容易让元素像被弹出去一样突然启动。
-
ease-in-out才是真正对称的缓入缓出，适合模态框淡入淡出这类中性动效 -
ease-out（cubic-bezier(0, 0, 0.58, 1)）收尾柔和，适合悬停展开类操作，比如下拉菜单滑出 - 自定义
cubic-bezier()时，第二、三参数超过 [0,1] 范围会生成“回弹”效果，但部分安卓 WebView 不支持，慎用 - 新特性
steps()函数（如steps(4, end)）适合帧动画模拟，但不适用于平滑过渡场景
transition 在伪类和媒体查询中失效的排查点
写好了 transition，但在 :hover 或 @media 里死活不动？大概率不是语法错，而是触发条件没对上。
最常踩的坑：transition 必须写在**初始状态**的规则块里，而不是只写在 :hover 中。否则浏览器不知道“从哪开始过渡”。
- 错误写法：
a:hover { color: red; transition: color 0.3s; }→ 无效，因为初始状态没声明transition - 正确写法：
a { color: #333; transition: color 0.3s; } a:hover { color: red; } - 媒体查询中同理：
@media (max-width: 768px) { .box { transform: scale(0.9); } }之前，必须有.box { transition: transform 0.25s; } - 还有一种隐形失效：过渡属性在初始和目标状态值类型不一致，比如从
visibility: hidden到visible——visibility不可过渡，得换用opacity或transform
复杂点在于，transition 不是“绑定到元素”，而是“绑定到属性变化”。值没变、类型不支持、或者被更高优先级的样式覆盖，都会让它静默退出。调试时打开 DevTools 的动画检查器，看 timeline 里有没有生成 transition 轨道，比猜快得多。
