transition不生效需先检查三件事：目标属性是否支持过渡、状态切换时属性值是否发生可插值变化、是否遗漏:hover等触发源。
transition 写不生效？先检查这三件事
绝大多数 transition 看不到动画，不是语法写错，而是它根本没被触发。CSS 过渡只对「可计算的、有起始和结束值的属性」起作用，且必须依赖状态变化（比如 :hover、class 切换）。
- 确保目标属性本身支持过渡 ——
display、height（从0到auto）、visibility这类不支持或难控制的属性，别硬套transition - 确认状态切换时，属性值发生了「可插值的变化」—— 比如
color: red→color: blue可以；但color: red→color: transparent在某些旧浏览器里可能跳变 - 检查是否遗漏了触发源 —— 单独写
transition: all 0.3s;不会自动动，必须配合:hover、JavaScript 改className或内联样式变更
transition-property 该用 all 还是具体属性名？
all 看似省事，实际是隐患源头。它会让所有可动画属性一起过渡，包括你没意识到会变的，比如 box-shadow、border-color，甚至某些框架悄悄改的 transform。
- 优先写明确属性：
transition-property: background-color, opacity, transform; - 避免
transition: all 0.2s ease;—— 它无法阻止意外过渡，还可能掩盖调试线索 - 如果真要多属性统一时长，用简写更可控：
transition: background-color 0.2s, opacity 0.2s, transform 0.2s;
transition-timing-function 选 ease 还是 cubic-bezier？
ease 是默认值，但它只是 cubic-bezier(0.25, 0.1, 0.25, 1) 的别名。真正需要微调节奏时，直接上 cubic-bezier() 更靠谱，尤其做交互动效。
- 快速减速用
cubic-bezier(0.34, 1.56, 0.64, 1)（类似 iOS 回弹） - 匀速运动别用
linear—— 它在视觉上反而显得“卡”，人眼习惯轻微加减速 - 慎用
step-start/step-end：它们不是缓动，是帧跳变，适合模拟打字、进度条分段等场景，不是“过渡”
transition-delay 负值有什么用？
负的 transition-delay 不是 bug，是让动画「从中间开始播」的技巧。比如你想鼠标移入瞬间就看到 60% 进度的效果，可以设 transition-delay: -0.12s;（假设总时长 0.2s）。
立即学习“前端免费学习笔记（深入）”；
- 常用于衔接多个动画：前一个元素动完，后一个用负延迟“接上时间轴”
- 不能为负值设置“倒放”效果 —— 它只跳过前段，不会反转动画方向
- 和
animation-delay不同，transition-delay负值在所有现代浏览器都稳定支持
最易忽略的一点：transition 不监听 DOM 属性变化，只响应 CSS 计算值变化。用 JavaScript 直接改 element.style.height = '200px'; 可能因重排时机问题导致过渡失效，此时加个 void element.offsetHeight; 强制重排，再改值，才能稳住过渡链。
