按钮悬停变色最自然的transition-duration区间是0.2s～0.4s，低于0.15s像闪屏，超过0.6s则显迟钝；人眼感知阈值约100ms，需据属性差异分别设置——background-color宜0.25s，transform可0.3s。
transition-duration 设多少才不突兀
0.2s～0.4s 是按钮悬停变色最自然的区间，超过 0.6s 会让人感觉迟钝，低于 0.15s 则像闪屏。这不是凭感觉——人眼对视觉反馈的容忍阈值在 100ms 左右，transition-duration 小于这个值基本感知不到过渡，大于 400ms 就开始拖沓。
常见错误是把所有按钮统一设成 transition: all 0.5s ease。实际中：background-color 和 transform 对延迟敏感度不同，前者宜快（0.25s），后者可稍缓（0.3s）以强化动效感。
- 纯色按钮：用
0.2s ~ 0.3s，强调响应性 - 渐变背景按钮：至少
0.3s，否则background-image位移动画跟不上 - 带
box-shadow或border-color变化的按钮：建议0.25s，避免阴影“弹跳”感
渐变按钮必须用 background-image 动画
直接对 background-color 做 transition 永远得不到流动效果——它只支持单色到单色，无法表达多色位移。真正实现“渐变流动”，得靠 background-image + @keyframes 移动 background-position。
关键参数不能错：
立即学习“前端免费学习笔记（深入）”；
-
background-size至少设为200% 200%，否则动画一动就露底色 - 渐变方向要和位移方向垂直：水平流动 → 用
to right渐变 +background-positionX 轴动画 - 动画时长控制在
3s ~ 6s，和transition-duration完全不是一回事——这是背景图自身循环节奏
示例片段：
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #4a90e2);<br>background-size: 200% 200%;<br>animation: gradientShift 4s ease-in-out infinite;
hover 时暂停流动动画但保留过渡
用户把鼠标停在按钮上，你希望流动效果暂停，但颜色/尺寸等状态变化仍要平滑过渡。这时候不能直接 animation-play-state: paused 一刀切——它会卡住整个动画状态，导致 hover 进入时背景色突变。
正确做法是分层控制：
- 用独立 class 控制流动动画（比如
.btn--flow），hover 时移除或加:hover .btn--flow的animation-play-state: paused - 把按钮状态变化（如
background-color、transform）的transition写在基础 class 上，和动画解耦 - 务必加
:active态，否则移动端点击无反馈；同时设-webkit-tap-highlight-color: transparent防止点击高亮干扰渐变
transition 失效的三个硬伤点
写完 transition 却没反应？八成掉进这三个坑：
- 目标属性不支持过渡：比如
display、height（内容高度不确定时）、font-family—— 查 MDN 的 “Animatable” 标识确认 - 初始值和结束值类型不匹配：从
rgba(0,0,0,0)到transparent看似一样，但浏览器不认为可插值，得统一用transparent或同格式 rgba - CSS 优先级覆盖：比如外部框架写了
!important的background-color，你的 hover 规则再强也赢不了
调试时打开开发者工具，选中元素，在 Styles 面板里看 transition 相关属性是否被划掉，比猜快得多。
流动渐变的本质是视觉欺骗，而过渡时间是欺骗成败的临界点——差 50ms，用户就觉得“卡”或“飘”。调的时候别只盯着秒表，盯着真实手指悬停的节奏去试。
