hover动画卡顿或跳变是因未在常态规则中正确声明transition；需指定可过渡属性、合理时长（0.1s–0.3s）和缓动函数，并避免用all或不可过渡属性；移动端应改用:active或JS实现按压反馈。
hover 动画卡顿或瞬间跳变，是因为没加 transition
CSS :hover 本身不带动画效果，所有属性变化默认是即时的。想让颜色、尺寸、位移等变化“缓过来”，必须显式声明 transition。漏写、写错属性名、或用了不支持过渡的属性（比如 display），都会导致生硬跳变。
-
transition必须写在**常态规则里**（即非:hover的那条），否则 hover 时才加 transition 已经晚了 - 只对可计算数值的属性生效：比如
color、opacity、transform、width（需有明确初始/结束值）、background-color - 避免对
height: auto或display: none → block做 transition —— 这些无法插值，会直接闪现
transition 写法不对，动画还是不自然
常见错误是只写 transition: all 0.3s，看似省事，实则埋雷：它会强行过渡所有变化属性，包括你没打算动的（比如意外触发的 box-shadow 或 font-size），造成干扰。更糟的是，all 会过渡 background-image 等不可过渡属性，浏览器可能静默忽略或降级处理。
- 精准控制：只过渡真正要变的属性，例如
transition: background-color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) - 时间别太长：0.1s–0.3s 最符合人眼感知；超过 0.4s 容易觉得迟滞
- 缓动函数选
ease-in-out或自定义cubic-bezier()，比默认ease更柔和；避免用linear（太机械）
用了 transform 却还是有闪烁或抖动
当 hover 中用 transform: scale() 或 translateY() 时，若元素未触发硬件加速，部分浏览器（尤其旧版 Safari / Edge）渲染帧率不稳，看起来像卡顿或边缘发虚。
- 强制开启 GPU 加速：在常态规则中加
transform: translateZ(0)或will-change: transform - 但别滥用
will-change：仅对频繁动画的元素设置，且 hover 时再加（避免页面加载就占用资源） - 确保父容器没有
overflow: hidden且裁剪了 transform 区域 —— 这会导致子元素动画被截断或重绘异常
button {
background-color: #007bff;
color: white;
border: none;
padding: 8px 16px;
/* 关键：常态下声明 transition 和硬件加速提示 */
transition: background-color 0.2s ease-in-out, transform 0.25s ease-out;
will-change: transform;
}
<p>button:hover {
background-color: #0056b3;
transform: translateY(-2px) scale(1.05);
}移动端 hover 根本不触发？那得换思路
绝大多数触摸设备没有真正的 hover 状态，:hover 在 iOS Safari 或 Android Chrome 上仅在模拟鼠标指针时短暂生效（比如连了蓝牙鼠标），不能依赖。想实现类似“按压反馈”，得用 :active 或 JavaScript 监听 touchstart/touchend。
立即学习“前端免费学习笔记（深入）”；
-
:active在触摸开始瞬间触发，适合做按钮按压缩放，但持续时间极短（约 100ms），需配合transition才能看清效果 - 真交互场景建议用 JS：监听
touchstart添加类（如.is-pressed），再用 CSS 过渡该类下的样式 - 别忘了同时兼容
:hover和:active，用逗号分隔：button:hover, button:active { ... }
过渡是否生效，最终取决于三个东西：属性是否可过渡、transition 是否写在正确位置、以及目标设备是否真有 hover 能力。缺一不可。
