bootstrap 5 按钮默认无 transition 属性，需显式声明 background-color、border-color、color 等过渡属性才能实现平滑悬停动画，避免使用 transition: all 导致性能问题。
Bootstrap 5 默认按钮没有悬停动画，必须手动添加 CSS 才能实现平滑过渡效果。
为什么直接加 transition 不生效？
Bootstrap 5 的按钮（如 .btn-primary）默认只设置了背景色、边框和文字颜色，但没声明 transition 属性。浏览器不会自动为未定义的属性补过渡效果，所以即使你写了 :hover 改变颜色，也会是“硬切”——没有动画感。
常见错误现象：:hover 背景色变了，但瞬间跳变，毫无缓动；或者加了 transition 却发现只在部分状态生效（比如只动了背景，边框不动）。
- 必须显式声明要过渡的属性，例如：
background-color, border-color, color - 不能只写
transition: all .2s—— 这会把 box-shadow、transform 等隐式变化也纳入，可能引发意外重绘或性能抖动 - Bootstrap 5 使用
rem和 CSS 变量（如--bs-btn-bg），直接覆盖变量更可控，但需注意作用域（推荐用:root或组件级样式）
给 .btn 添加统一过渡规则
最稳妥的做法是在全局样式中补全基础过渡声明，覆盖所有按钮变体：
.btn {
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
<p>.btn:hover {
/<em> 不必改具体值，Bootstrap 已定义 hover 状态，只需触发 transition </em>/
}</p>
这样写的好处是：不破坏 Bootstrap 原有逻辑，所有 .btn-primary、.btn-outline-success 等都会继承该过渡行为。如果你用 Sass，可直接在 _buttons.scss 后追加这段。
- 时间建议用
0.2s或0.25s：太短（0.1s）像没动，太长（0.4s）有延迟感 - 缓动函数优先
ease，比linear更自然；需要更强反馈可用ease-in-out - 避免对
transform做过渡（如scale）—— 按钮尺寸变化会影响布局流，容易导致文字抖动或换行
实现带缩放+阴影的增强型悬停（慎用）
如果确实需要视觉强化，推荐用 transform: translateY(-1px) + box-shadow，它不改变文档流，且硬件加速友好：
.btn.lift-on-hover:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
但要注意兼容性与副作用：
- 必须给原按钮加
will-change: transform（仅在必要时）或确保父容器有transform: translateZ(0)触发 GPU 加速，否则快速悬停可能卡顿 - 不要同时对
transform和background-color做过渡——不同属性触发的重绘层级不同，易出现渲染撕裂 - 移动端 Safari 对
transform悬停支持弱，真机测试必做；可加媒体查询降级：@media (hover: none) { .btn.lift-on-hover:hover { transform: none; } }
真正难的不是写几行 CSS，而是判断哪些交互值得加动画、哪些加了反而干扰用户。比如表单提交按钮强调确认感，适合轻微上移+阴影；而工具栏里的图标按钮，加动画就容易显得轻浮。过渡节奏和设计语境得咬住不放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
