给 button 添加 transition 无效是因为未配合状态伪类（如 :hover）显式定义起始态和结束态，且需避免使用 all、确保属性可过渡、兼顾性能与无障碍。
transition 用在 button 上为什么没反应
直接给 <button></button> 写 transition: all 0.3s 通常无效，因为多数 CSS 属性（比如 background-color、color、transform）默认没有「可过渡的初始状态变化」——你得主动触发状态变更，最常用的是 :hover 或 :focus。
常见错误是只写了 transition，但没配对设置「起始态」和「结束态」。比如只写 button:hover { background-color: #007bff; }，而没给默认 button 定义 background-color，浏览器可能从 transparent 或 UA 默认色跳变，导致过渡不自然甚至失效。
- 必须显式声明起始值：比如
background-color: #007bff;和button:hover { background-color: #0056b3; } - 避免用
all过渡，它会拖慢渲染；只过渡真正需要的属性，如transition: background-color 0.2s ease, transform 0.2s ease; - 别忘了加
cursor: pointer;，否则鼠标悬停时无反馈，用户感知不到可交互
用 transform 实现按钮缩放/位移过渡
比起改宽高或 padding，transform 性能更好（不触发重排），适合做 hover 动效。但要注意：必须配合 will-change: transform;（可选，仅对频繁动画有帮助）且不能和 display: none 共存——后者会清空渲染树，动画直接中断。
典型写法：
button {
transition: transform 0.2s ease;
}
button:hover {
transform: scale(1.05);
}
- 缩放建议控制在 1.05–1.15 之间，太大易造成布局抖动
- 若同时想加位移，用
transform: scale(1.05) translateY(-2px);，不要拆成两个transform声明（后者会覆盖前者） - 移动端需补
button:active { transform: scale(0.98); }，否则点击无反馈
transition-timing-function 怎么选才不生硬
默认的 ease 是「先慢后快再慢」，适合大多数按钮；但如果你希望更轻快，用 ease-in-out；要强调「按下感」，cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 Material Design 的标准缓动）更自然。
- 避免用
linear，机械感太强，按钮缺乏弹性反馈 - 慎用
ease-in或ease-out单侧缓动，容易让 hover 进入或离开显得突兀 - 调试时可用浏览器 DevTools 的动画检查器（Elements → Styles → 点击 transition 右侧小图标）实时拖拽调节贝塞尔曲线
兼容性与无障碍注意事项
IE10+ 支持 transition，但 IE 不支持 transform: scale() 在 <button></button> 上的过渡（会 fallback 到无动画）。另外，纯靠颜色/动画传达状态违反 WCAG，必须辅以文字或图标变化。
- 务必测试键盘焦点：用
Tab键聚焦按钮时，button:focus应有等效过渡（如outline配合transition） - 尊重系统偏好：加
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }关闭动画 - 不要依赖过渡来传递关键信息，比如「按钮已禁用」必须用
disabled属性 + 灰色样式，不能只靠淡出动画
最易被忽略的一点：过渡时间超过 0.3 秒，用户就会感知延迟；低于 0.1 秒又难察觉。0.2 秒是多数场景下的平衡点，别为了“炫”堆复杂链式动画——按钮的核心任务是被点击，不是被观赏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
