最简单高效的方式是用 transform: scale() 配合 transition；默认 scale(1)，hover 时 scale(1.04)，加 transition: transform 0.2s ease-in-out；注意合并已有 transform 值，避免覆盖。
按钮 hover 时加微缩放动效，最简单高效的方式是用 transform: scale() 配合 transition，不需要复杂 keyframes——除非你想要非线性或分段动画。
用 transition + scale 实现平滑微缩放
这是主流做法，性能好、代码简洁、兼容性强：
- 默认状态设
transform: scale(1)（可省略） - hover 时设
transform: scale(1.04)（放大 4%，足够微妙） - 加上
transition: transform 0.2s ease-in-out让变化柔和
示例代码：
button {
transform: scale(1);
transition: transform 0.2s ease-in-out;
}
button:hover {
transform: scale(1.04);
}
避免常见坑：别忘重置 transform
如果按钮本身已有旋转、位移等 transform（比如 rotate(2deg)），直接写 scale(1.04) 会覆盖原有值，导致其他效果丢失。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：合并写，如
transform: rotate(2deg) scale(1.04) - 更稳妥：用 CSS 自定义属性动态组合，或 JS 控制（适合复杂场景）
什么时候才需要 @keyframes？
仅当你需要「先微缩再回弹」「脉冲式呼吸缩放」或「配合其他属性联动」时才用 keyframes。例如轻微弹跳感：
@keyframes subtleBounce {
0% { transform: scale(1); }
50% { transform: scale(1.06); }
100% { transform: scale(1); }
}
button:hover {
animation: subtleBounce 0.3s ease;
}
⚠️ 注意：animation 默认不反向、不暂停，需手动加 animation-fill-mode: forwards 或控制循环次数（如 animation-iteration-count: 1）。
提升体验的小细节
- 缩小比放大更显“轻盈”，可尝试 hover 时
scale(0.98)（慎用，易误判为失活） - 移动端慎用 hover 动效——部分 iOS Safari 不触发 :hover，建议搭配
:active补充触控反馈 - 对可访问性友好：确保缩放不遮挡文字、不引发布局偏移（避免触发重排）
基本上就这些。微缩放贵在克制，0.02～0.06 的 scale 变化最自然，配个 150–250ms 的过渡时间，手感刚好。
