用 transition 实现平滑 hover 效果：需在默认状态声明 transition（如 transition: background 0.3s ease），支持多属性逗号分隔，优选 transform/opacity 避免重排，搭配 ease-in-out 等缓动函数提升自然感。
给元素加 hover 效果时直接改颜色、大小或透明度，容易显得“啪”一下跳变，很生硬。解决方法很简单：用 transition 告诉浏览器“这个变化请慢慢来”，就能实现自然柔和的过渡效果。
基础写法：指定属性 + 持续时间 + 缓动函数
在元素的默认状态（非 hover）里加上 transition，而不是只写在 hover 里。这样进出都有动画，不会只进不退。
例如：
button {
background: #007bff;
color: white;
transition: background 0.3s ease, color 0.3s ease;
}
button:hover {
background: #0056b3;
color: #f8f9fa;
}
说明：
立即学习“前端免费学习笔记（深入）”；
- background 0.3s ease：背景色在 0.3 秒内，按 ease（先慢→快→慢）方式过渡
- 可以同时控制多个属性，用逗号分隔
- 推荐把 transition 写在默认状态，保证鼠标移入和移出都平滑
常用且自然的缓动函数选哪个？
transition 的第三个参数是 timing-function，别总用默认的 ease，试试这些更贴合场景的：
- ease-in-out：进出都缓启缓停，适合大多数按钮、卡片悬停
- cubic-bezier(0.25, 0.46, 0.45, 0.94)：一种更轻盈的“缓入缓出”，类似 Material Design 风格
- ease-out：快速启动、缓慢结束，适合下拉菜单展开、图标旋转等“收尾要稳”的动作
进阶技巧：避免意外抖动与性能问题
有些 hover 效果看似平滑，实际会闪、卡或触发重排，注意这几点：
- 慎用 width/height/margin/padding 动画——会触发布局重排（layout），卡顿明显；优先用 transform（如 scale、translate）和 opacity
- 想放大按钮？写
transform: scale(1.05);+transition: transform 0.25s ease-out;，比改 width 更流畅 - 文字颜色变化没问题，但避免在 hover 中突然加阴影（box-shadow）又没设默认值——会导致 layout 波动；统一设好默认 box-shadow，只调 color 或 opacity
小而实用的组合示例
一个带微动效的链接按钮：
a.btn {
display: inline-block;
padding: 8px 16px;
color: #007bff;
text-decoration: none;
border-bottom: 2px solid transparent;
transition:
color 0.2s ease-in-out,
border-bottom-color 0.2s ease-in-out,
transform 0.2s ease-out;
}
a.btn:hover {
color: #0056b3;
border-bottom-color: #0056b3;
transform: translateY(-2px);
}
效果：文字变深、下划线浮现、整体轻微上浮——三者同步、节奏协调，不抢戏也不生硬。
基本上就这些。transition 不复杂，但容易忽略“写在哪”和“选什么函数”。把变化交给它，让 hover 真正呼吸起来。
