hover 触发动画时，transition 和 animation 哪个更合适
多数情况下用 transition 更直接、可控。它专为属性值变化设计，比如颜色、尺寸、透明度等；而 animation 适合多阶段、循环或复杂时间曲线的动效（如弹跳、路径位移）。若只是“悬停变色+缩放”，transition 足够，也更轻量。
-
transition必须配合伪类（如:hover）触发属性变更，本身不定义过程，只描述“如何过渡” -
animation需要先用@keyframes定义帧，再通过animation-name绑定，悬停时用animation-play-state: running控制启停 - 若 hover 离开后需“反向动画”，
transition天然支持（只要离开时属性恢复原值）；animation默认不会倒播，得手动写reverse或双 keyframes
transition 动画卡顿或没反应的常见原因
不是代码写错，而是几个隐性条件没满足：
- 目标属性必须是「可过渡」的，比如
color、transform、opacity可以，但display、height（从0到auto）不行 - 初始状态和 hover 状态的属性值类型要一致：不能一个写
transform: scale(1)，另一个写transform: translateX(10px)—— 浏览器无法插值 - 没设置
transition-property或写成all：建议明确列出，避免意外过渡（如box-shadow模糊半径突变会明显卡） - 父元素有
overflow: hidden且子元素动画超出边界时，可能被裁剪或触发重绘，影响性能
用 transform + transition 实现丝滑 hover 缩放与位移
关键点：优先用 transform 和 opacity，它们走 GPU 加速，不触发重排（reflow），比改 width / left 流畅得多。
button {
padding: 12px 24px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
/* 启用硬件加速 */
transform: translateZ(0);
/* 明确指定过渡属性和时长 */
transition: transform 0.2s ease, opacity 0.2s ease;
}
<p>button:hover {
transform: scale(1.05) translateY(-2px);
opacity: 0.9;
}-
transform: translateZ(0)是个小技巧，强制开启 GPU 层，尤其在旧版 Safari 或安卓 WebView 中能避免闪烁 - 多个
transform操作（如scale+translateY）应合并写在一个transform声明里，否则后者会覆盖前者 - 避免在 hover 中改
margin或padding，这会触发 layout，导致卡顿
animation 配合 hover 控制播放状态
当需要 hover 时播放一次脉冲、旋转或波纹效果，用 animation 更自然。重点是控制播放时机，而不是让动画一直循环。
立即学习“前端免费学习笔记（深入）”；
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.08); }
100% { transform: scale(1); }
}
<p>.icon {
width: 24px;
height: 24px;
animation: pulse 0.6s ease-out;
animation-play-state: paused; /<em> 初始暂停 </em>/
}</p><p>.icon:hover {
animation-play-state: running;
}-
animation-play-state是唯一能安全控制 CSS 动画启停的属性，不要用animation-delay模拟“等待 hover” - 如果希望每次 hover 都重新播放（比如按钮点击反馈），需加
animation-fill-mode: forwards并配合 JS 重置动画，纯 CSS 无法自动重播已结束的动画 - 注意：Safari 对
animation-play-state在伪类中的支持较晚（iOS 13.4+），低版本需降级为transition
实际项目中，hover 动效最常被忽略的是「取消动画」逻辑 —— 比如用户快速进出元素，transition 会累积队列，animation 可能卡在中间帧。稳妥做法是加 transition-timing-function: ease-out 并控制持续时间别超过 300ms。
