transition-duration 控制属性值变化过程的持续时间，需配合 transition-property 或 transition 简写生效；设为 0s 仍触发重绘，不等于禁用；兼容性好但需注意 Safari、旧 Android 和 IE 的细节差异。
transition-duration 设置悬停动画快慢的原理
鼠标悬停（:hover）本身不产生动画，真正控制“变快还是变慢”的是 transition-duration —— 它只对「属性值发生变化」的过程生效。比如从 color: #333 变到 color: #007bff，这个变化过程的持续时间才由它决定。
常见错误是只写 transition-duration: 0.3s 却没配 transition-property 或 transition 简写，结果悬停毫无反应。
- 必须和
transition-property（或简写中的属性名）配合，否则浏览器不知道该过渡哪个属性 - 推荐用
transition简写：比如transition: color 0.3s ease, background-color 0.3s ease - 数值支持秒（
s）和毫秒（ms），0.3s和300ms等价，但0.3s更常用 - 设为
0s不等于禁用过渡——它只是“瞬间完成”，视觉上仍会触发重绘，可能引发意外闪烁
hover 动画卡顿或不触发的典型原因
写完 transition-duration 却没效果？大概率掉进了这几个坑：
- 目标属性不支持过渡：比如
display、height（从0到auto）、font-size（某些旧版 Safari 对相对单位过渡支持差） - 悬停前后属性值类型不一致：例如从
color: #333到color: transparent是 OK 的；但从color: #333到color: inherit就可能中断过渡 - 父元素有
overflow: hidden且子元素在悬停时位移超出边界，动画会被裁剪甚至失效 - 用了
will-change: transform但没配transform相关过渡，反而干扰了其他属性的过渡行为
CSS transition-duration 在不同浏览器里的兼容表现
transition-duration 本身兼容性极好（Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+），但实际体验差异往往来自配套规则：
立即学习“前端免费学习笔记（深入）”；
- Safari 对
transition-timing-function: cubic-bezier(...)的解析更严格，小数点后多一位（如0.255）可能被忽略，建议保留三位以内 - 旧版 Android Webview（4.4 及更早）不支持
transition作用于伪元素（::before/::after），需改用 JS 触发 class 切换 - IE10/11 支持
transition-duration，但不支持transition简写中多个属性混写（比如transition: all 0.3s, opacity 0.1s会整体失效），得拆成单独声明
过渡速度设多少才自然？几个真实场景参考值
没有“标准值”，但根据大量 UI 实践和人眼感知延迟，这些数值比较稳妥：
- 文字颜色/边框色变化：
0.15s – 0.25s（太快显得生硬，太慢像卡顿） - 背景色渐变或按钮填充：
0.2s – 0.3s（兼顾响应感与柔和度） - 图标旋转或缩放（
transform）：0.2s起步，超过0.35s就容易让用户等待 - 慎用
> 0.4s的悬停过渡——这不是“优雅”，是交互反馈延迟，尤其在列表项或导航菜单里
真正难的不是调出一个能动的效果，而是让所有悬停动作的节奏统一、属性匹配、退场也自然。很多人只写了 :hover 过渡，却忘了加回退的 transition 声明（默认已存在，但若 hover 里覆盖了 transition: none 就全废了）。
