transition失效的根本原因是缺少明确起始/结束状态或选错属性，必须用transform、opacity等可合成属性，避免all和display/height:auto等不可插值属性，并配will-change或translatez(0)启用硬件加速。
按钮 hover 动画卡顿、跳变，不是 CSS 写得不够多，而是 transition 没配对 —— 缺少明确的起始/结束状态，或过渡属性选错了。
为什么 transition 加了却没反应？
常见现象：写了 transition: all 0.3s;，但按钮颜色或尺寸变化时仍突兀。根本原因是 all 会尝试过渡所有可动画属性，但很多属性（如 display、height 从 auto 开始）根本不支持过渡，导致整条规则被浏览器静默忽略。
- 只过渡真正需要的属性，例如：
transition: background-color 0.25s ease, transform 0.25s ease; - 避免用
all，尤其在生产环境；它不可控，且可能意外触发重排（如过渡width） - 确保起始和结束状态都明确可计算：比如
transform: scale(1)→scale(1.05)可行，但transform: none→scale(1.05)在部分旧浏览器中可能不触发过渡
transform 和 opacity 是最安全的过渡属性
它们触发的是合成（composite）层提升，不触发重排（reflow）或重绘（repaint），动画帧率稳定。而 width、height、margin、background-color（部分场景）等会引发重排/重绘，容易掉帧。
- 按钮缩放/位移优先用
transform: scale()或translateY()，别改width或padding - 淡入淡出必须用
opacity，而不是靠visibility或display切换（二者不可过渡） - 如果要用背景色变化，确认颜色值是合法的、可插值的（如
#3b82f6↔#1d4ed8可以，但transparent↔rgba(0,0,0,0.1)在 Safari 旧版中偶有兼容问题）
如何让 hover 动画真正「丝滑」？
光有 transition 不够，还要控制触发时机和硬件加速。关键在 will-change 和 transform: translateZ(0) 的合理使用。
- 对频繁交互的按钮，加
will-change: transform, opacity;（仅在 hover 前一帧提示浏览器准备） - 更稳妥的做法是默认启用轻量级合成层：
transform: translateZ(0);或transform: translate3d(0, 0, 0);（现代浏览器已优化，但对 iOS Safari 仍有意义） - 动画曲线别全用
ease：按钮点击反馈建议用cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 Material Design 的「标准缓动」），比默认ease更有响应感 - 过渡时间控制在 0.2s–0.35s 之间：短于 0.15s 用户感知不到动画，长于 0.4s 显得迟滞
移动端点击无反馈？记得处理 :active 状态
iOS Safari 和部分安卓 WebView 默认会延迟 300ms 才触发 :active，导致点击瞬间没视觉反馈。这不是 CSS 问题，而是浏览器默认行为。
- 加
touch-action: manipulation;到按钮上，能禁用双击缩放并缩短激活延迟 - 同时定义
button:active样式（哪怕只是transform: scale(0.98);），否则用户会怀疑没点中 - 不要依赖
:hover做主要反馈：移动端无 hover，需确保:active和 JS 的click状态一致 - 若用伪类做按压效果，注意
transform值别和 hover 冲突（例如 hover 放大、active 再缩小，会造成抖动）
真正难的不是写出动画，而是判断哪些状态值得动、哪些属性动了反而伤性能、以及在不同设备上保持一致的反馈节奏。一个按钮的 transition 规则，往往要同时满足 Chrome DevTools 的「Rendering」面板不闪黄、iOS 上点按不粘滞、旧安卓机不掉帧 —— 这些细节，才是丝滑的代价。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
