hover过渡生硬是因为未设置transition或duration过小；应设0.25s–0.35s的duration，用ease-in-out等缓动函数，指定具体属性而非all，并确保默认与hover状态均有明确起始值。
hover 过渡生硬是因为没设 transition 或 duration 太小
默认情况下，CSS :hover 状态切换是瞬时的，没有过渡效果。哪怕写了 transition，如果 transition-duration 设成 0s 或 0.1s，人眼也会觉得“啪”一下跳变，尤其在颜色、尺寸、透明度这类敏感属性上。
关键不是加不加 transition，而是选对持续时间和缓动函数：
-
transition-duration建议从0.2s起步，多数场景0.25s–0.35s最自然 - 避免用
linear（匀速），它在视觉上反而更突兀 - 优先用
ease-in-out或cubic-bezier(0.34, 1.56, 0.64, 1)这类有缓入缓出的曲线
只对需要动画的属性写 transition，别用 all
写 transition: all 0.3s ease; 看似省事，但隐患很多：比如 height 从 auto 变成具体值、display 切换、或某些未初始化的 CSS 变量，都会导致过渡失效或卡顿。
更稳妥的做法是指定具体属性：
立即学习“前端免费学习笔记（深入）”；
button {
background-color: #007bff;
color: white;
transition: background-color 0.25s ease-in-out,
color 0.25s ease-in-out,
transform 0.25s ease-in-out;
}
button:hover {
background-color: #0056b3;
color: #f8f9fa;
transform: translateY(-2px);
}
这样既可控，又避免意外触发无意义过渡（比如无意中改了 box-shadow 却没配初始值）。
注意 hover 入场和离场要一致，否则会“抽搐”
很多人只写 :hover 的样式，忘了默认状态也要配好初始值。例如：
- 如果
:hover里加了transform: scale(1.05)，默认状态必须显式写transform: scale(1)，否则浏览器会从none插值，造成入场抖动 - 同理，
opacity、filter、box-shadow都得有明确的起始值 -
伪元素（如
::before）的过渡也需单独声明transition，不能依赖父元素继承
移动端 hover 不生效？别依赖它做核心交互
真机上大多数触摸设备没有 hover 概念，:hover 触发时机不可靠（比如 Safari iOS 会在点击后短暂保留 hover 状态）。如果你的过渡效果是为可点击区域服务的，务必同时支持 :active 和焦点态：
a {
transition: color 0.2s ease-in-out;
}
a:hover,
a:focus,
a:active {
color: #dc3545;
}
否则用户点下去那一瞬间，什么动画都没有，体验断层。真正平滑的交互，得把 hover 当作「锦上添花」，而不是唯一路径。
过渡是否顺滑，不取决于你用了多少种 cubic-bezier 曲线，而在于每个变化都有明确起点、终点和合理节奏。漏掉一个初始值，或者在不该过渡的地方加了 transition，都可能让整个动效显得廉价。
