必须加animation-fill-mode: forwards才能保持:hover动画终态，因其默认值none导致动画结束即回退；若用transition则需确保hover与基础样式中相关属性（如transform）均有明确定义。

按钮:hover动画一移开就闪回原样，怎么让它保持终态

根本原因是CSS动画默认不保留最后一帧，animation执行完立刻跳回初始样式。这不是bug，是规范行为——除非你明确告诉浏览器“停在最后”。

• animation-fill-mode: forwards必须加，且要写在触发动画的规则里（比如.btn:hover），只写animation: pulse 0.6s没用
• 如果用的是transition而非animation，那问题不在“保持”，而在“终值是否定义清楚”：比如:hover里只写了transform: scale(1.05)，但基础样式没设transform: scale(1)，某些浏览器会 fallback 到none导致抖动
• 别在:hover里只改background-position却不设background-size和background-repeat——这些属性不参与过渡，会导致背景错位或重复异常

下拉菜单里按钮悬停后移入子菜单，下划线突然消失

这不是动画失效，是:hover作用域太窄。鼠标离开<a>标签、进入兄弟元素.dropdown-menu时，a:hover立即失活，连带所有依赖它的动画回退。

• 解决方案是把状态锚点上提：用父容器.dropdown-menu-hook:hover .line-anim代替a:hover .line-anim
• 确保.dropdown-menu是.dropdown-menu-hook的直接子元素，否则:hover无法穿透到内部
• 如果父容器用了overflow: hidden或transform创建了新的层叠上下文，可能截断:hover冒泡，得检查渲染树结构

点击反馈延迟、松手才弹回，不是JS慢，是伪类用错了

:active只在按下瞬间生效，释放即清空。它模拟的是“物理按压瞬态”，不是“按钮按下并保持”的状态。想实现真实手感，必须脱离伪类依赖。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 给按钮加pressed类，用JS在mousedown/touchstart时添加，mouseup/touchend时移除
• 避免在touchend里直接remove——手指抬起瞬间可能触发click事件，造成类闪一下又消失；建议用setTimeout(() => el.classList.remove('pressed'), 0)微任务延迟清理
• 如果按钮有disabled状态，记得在pressed类里加pointer-events: none，防止快速连点触发多次

动画卡顿、闪烁，尤其在Safari或滚动中频繁进出

多数卡顿不是性能差，而是触发了重排（reflow）或强制软件渲染。关键看改的是哪类属性。

立即学习“前端免费学习笔记（深入）”；

• 优先用transform和opacity做动画——它们走合成层，不触发布局计算
• 如果非要用background-color或width，务必加will-change: background-color（注意：仅在必要时加，滥用反而伤性能）
• Safari对transform: scale()的GPU加速支持不稳定，换成transform: translateZ(0)或backface-visibility: hidden更稳妥
• 别在:hover里同时改border和padding——这会触发重排，改用outline或box-shadow替代边框效果

动画保持和交互节奏不是靠堆效果实现的，而是靠理解浏览器如何解析状态、何时触发重绘、以及CSS伪类的真实生命周期。最容易被忽略的，其实是那个没写的transform: scale(1)——它不在DOM里，却决定了动画是否从“无”开始。