按钮悬停动画失效因:hover离开即回退，需加animation-fill-mode: forwards；点击反馈不跟手因仅依赖:active，应js控制pressed类；性能卡顿因滥用重绘属性，须优先使用transform/opacity并适配safari。
按钮悬停时背景色闪一下就没了，怎么让动画持续生效
根本原因是 :hover 状态一离开就回退，没做状态保持。CSS 动画默认不保留最终帧，得手动加 animation-fill-mode: forwards。
- 只写
animation: pulse 0.6s不够，必须补上forwards，否则鼠标移开瞬间跳回初始样式 - 如果用了
transition而不是animation，那要确保 hover 下的属性（比如background-color）有明确终值，且过渡时间合理（transition: background-color 0.3s ease） - 别在
:hover里只改transform却忽略will-change: transform—— 滚动中快速进出容易卡顿，加这句能提前触发 GPU 加速
点击后按钮“按下去”效果不跟手，松开才弹回
这是把交互逻辑全压在 :active 上导致的。这个伪类只在鼠标按下/触摸期间生效，松手即失效，没法模拟真实按钮的反馈节奏。
- 用 JavaScript 监听
mousedown和touchstart，给按钮加临时 class（比如is-pressed），再用 CSS 控制该 class 下的transform: scale(0.95) - 一定要同时监听
mouseup和touchend，并在它们触发时移除 class；否则在移动端滑动离开按钮再松手，按钮会一直卡在按下态 - 避免直接操作
style.transform，优先走 class 切换 —— 更易维护，也方便配合 CSS transition 做缓动
多个炫酷效果堆一起，按钮点不动或样式错乱
常见于同时叠加阴影、渐变、旋转动画、文字描边等，根源是层叠上下文（stacking context）和重绘开销失控。
-
box-shadow和text-shadow多层叠加 +transform动画，容易触发全量重绘，低端设备明显掉帧；可改用filter: drop-shadow()替代部分box-shadow，它走 GPU 且不影响布局 - 渐变背景（
background: linear-gradient）+background-size动画时，务必设background-origin: border-box，否则圆角按钮边缘可能出现色块撕裂 - 所有动画属性尽量只动
transform和opacity—— 这两个不会触发 layout 或 paint，其余属性（如width、left、color）动起来就是性能炸弹
在 Safari 上动画卡顿或不触发
Safari 对 CSS 动画的解析和硬件加速策略和其他浏览器不同，尤其对 @keyframes 中未声明的属性或隐式继承敏感。
- 确保每个
@keyframes规则里显式写出所有参与动画的属性，哪怕起始值和默认值一样 —— 比如transform: translateZ(0)在 Safari 中常用来强制开启 GPU 加速，但必须写进 keyframes 第一帧 -
will-change: transform在 Safari 中需搭配transform: translateZ(0)才稳定生效，单写前者可能被忽略 - 避免用
clip-path做圆形裁切动画，Safari 15.4 之前版本对它的硬件加速支持极差；可用border-radius+overflow: hidden替代
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
