按钮动效自然的关键是精准控制transition：仅过渡transform和opacity以启用GPU加速，避免重排；采用0.2s–0.3s duration与ease-in-out曲线；禁用transition-delay以防响应延迟；并确保进出动画双向优化。
transition 用对了，按钮动效才不僵硬
直接写 transition: all 0.3s ease 看似省事，但实际会过渡所有可变属性（比如 box-shadow、border-width、甚至意外触发的 outline），导致鼠标划过时出现不可控的“抖动”或延迟响应。真正自然的动效，核心是只动该动的属性。
- 优先过渡
transform和opacity：它们走 GPU 加速路径，帧率稳定，不会触发重排（reflow） - 避免过渡
width、height、top、left：这些会强制浏览器重排布局，尤其在低端设备上容易卡顿 - 明确列出属性比用
all更可控：例如transition: background-color 0.25s ease-in-out, transform 0.25s ease-in-out
hover 动效卡顿？检查 timing-function 和 duration 搭配
默认的 ease 在按钮反馈中其实偏“肉”，起始和结束都有明显顿感；而 linear 又太机械。自然的交互节奏需要更精细的匹配。
- 按钮悬停推荐
ease-in-out：比默认ease更平滑，减少初始“粘滞感” - 如果加了
transform: scale(1.05)，duration 别超过0.25s，否则放大过程显得拖沓 - 过渡时间低于
0.15s人眼难感知，高于0.4s容易产生等待感——0.2s–0.3s是安全区间 - 慎用
cubic-bezier(0.175, 0.885, 0.32, 1.275)这类 overshoot 曲线：适合菜单展开，但用在按钮上容易显得“弹跳过头”
transition-delay 不是用来“等半秒再动”的
transition-delay: 0.3s 并不是让动效延后播放，而是让浏览器延迟开始监听属性变化。一旦在这 0.3 秒内状态又变了（比如鼠标快速移入移出），这次过渡大概率被丢弃，结果就是“有时动、有时不动”。
- 移动端 touch 事件本身有约 300ms 延迟，叠加
transition-delay后，用户会明显感觉“点了没反应” - 和 JS 动态加 class 混用时，容易出现 class 已移除、delay 刚结束、过渡却从新状态反向执行（比如从 visible → hidden 的收缩）
- 真要控制节奏，用 JS 的
setTimeout+ class 切换更可靠；CSS 层面保持transition-delay: 0s
图标+文字按钮的位移动效，别只靠 transform
常见做法是 hover 时给 span 加 transform: translateX(4px)，但若父容器没设 overflow: hidden 或文字未禁用换行，位移可能引发布局偏移或文字错位。
立即学习“前端免费学习笔记（深入）”；
- 确保图标容器使用
display: inline-flex或display: flex，避免inline元素的 baseline 对齐干扰 - 给图标元素加
flex-shrink: 0，防止文字撑宽时图标被压缩 - 位移量建议用
px而非em：translateX(4px)更稳定，translateX(0.25em)在不同字号下表现不一致 - 如果配合边框动画（如
::after下划线），记得给伪元素也加相同transition声明，否则会出现“文字先动、线条后跟”的割裂感
:hover 状态消失，浏览器仍会按原 transition 规则执行回退动画。这意味着，如果你只优化了 hover 进入效果，退出时的观感可能完全失控。 
