按钮悬停动画失效因: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）和重绘开销失控。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 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 替代

实际做时，最麻烦的不是加效果，而是判断哪个动效真正在用户感知里“有用”。比如一个带光晕扩散的点击反馈，如果扩散半径超过按钮宽度 2 倍，人眼反而看不出变化节奏；而 0.1s 内完成的 scale 缩放，比 0.4s 的渐变色切换更让人觉得“响应快”。这些细节没有标准答案，得自己点十次、看五次、调三次。