transition 是复合属性，需同时指定时长与属性名（如 transition: background-color 0.2s ease），仅设 timing-function 或 duration 为 0s 均无效；不可过渡 position 等非数值属性，应改用 top/left 或 transform；避免 transition: all，推荐显式声明 opacity 和 transform 等高性能属性。
transition 是复合属性，不是基础属性
transition 本身是 CSS 的**复合属性（shorthand property）**，它把四个独立的过渡控制子属性打包成一个声明。浏览器解析时会自动拆解为：transition-property、transition-duration、transition-timing-function 和 transition-delay。这意味着你不能只写 transition: 0.3s; 就生效——duration 必须存在，且 property 默认是 all，但若 duration 为 0s（默认值），那就等于没过渡。
- 常见错误：只设
transition: ease;→ 无效，缺少时长 - 正确简写必须含时长，如
transition: background-color 0.2s ease; - 顺序有隐含要求：
duration必须出现在delay前，否则整个声明会被忽略（例如transition: 0.1s 0.3s;中，浏览器会把0.1s当作duration，0.3s当作delay；但若写成transition: 0.3s 0.1s;，则0.3s是duration，0.1s是delay—— 看似反直觉，实为规范）
transition 不作用于“定位变化”本身，而是作用于定位相关属性
很多人说“用 transition 动 position”，其实不准确。position 属性（如 static / relative / absolute）本身**不可过渡**；真正能过渡的是它的“定位偏移量”，比如 top、left、right、bottom 这些数值型属性（前提是元素已处于可定位状态，即 position 不为 static）。
- 有效示例：
.box { position: relative; left: 0; transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .box:hover { left: 100px; } - 无效示例：
.box { position: static; transition: position 0.3s; } /* position 不可过渡 */ - 更推荐用
transform: translateX()替代left：性能更好（不触发重排），且支持硬件加速
为什么建议避免 transition: all？
transition: all 0.3s; 看似省事，但实际隐患多。它会让所有可过渡属性（包括你没意识到会变的，比如 box-shadow、font-size、甚至某些伪类导致的 outline）都套上动画，容易引发意外抖动或卡顿。
- 典型问题：表单控件获焦时，
outline突然淡入，干扰用户注意力 - 性能风险：
width或height过渡会触发 layout（重排），而transform和opacity只走合成层，更高效 - 维护困难：后期加新样式时，不清楚哪些变化会被“悄悄动起来”
- 推荐写法：
transition: opacity 0.2s, transform 0.25s ease-out;
transition 触发需要“状态变化”，不是“定义即动”
transition 不是主动动画，它像一个监听器：只有当某个被声明的属性值在两个不同状态之间切换时（比如 :hover → 默认，或 JS 修改 style.left），才会启动。它不关心怎么变，只管“从 A 到 B 的过程是否平滑”。
立即学习“前端免费学习笔记（深入）”；
- 常见误解：给元素加了
transition，就以为它“自带入场动画” → 实际不会，初始渲染无过渡 - JS 场景注意：若通过 JS 一次性设置多个属性（如
el.style.left = '100px'; el.style.opacity = '0.5';），浏览器可能合并重绘，导致部分过渡失效；应先设transition，再批量改值，或用getComputedStyle强制触发重排 - 兼容性提醒：IE10+ 支持，但 IE 不支持
cubic-bezier的四参数写法（需用预设关键字如ease-in-out）
过渡真正难的不是写法，而是判断「哪个属性在变」「是否值得加过渡」「会不会拖慢渲染」——这些得看具体 DOM 结构和交互意图，没法靠模板解决。
