打印时动画需用@media print逐项重置：animation-name: none、animation-duration: 0s、animation-delay: 0s、animation-iteration-count: 1、transition: none，并覆盖伪元素及动态类名，确保样式优先级和加载顺序正确。
打印时动画还在闪？用 @media print 直接切断 animation
浏览器默认不会停掉 CSS 动画，哪怕你按 Ctrl+P 进入打印预览，animation 和 transition 依然在跑——这不仅浪费资源，还可能导致打印内容错位、截断或生成空白页。解决办法很简单：在 @media print 中把动画相关属性清空。
animation 和 transition 必须显式重置
只写 animation: none 不够，因为 animation 是复合属性，会覆盖 animation-name、animation-duration 等子属性，但某些浏览器（比如旧版 Safari）对 none 解析不一致；更稳妥的做法是逐项归零：
-
animation-name: none—— 强制清空所有关键帧引用 -
animation-duration: 0s—— 防止 duration 为inherit或意外继承值 -
animation-delay: 0s和animation-iteration-count: 1—— 避免重复触发或延迟残留 -
transition: none或transition-property: none—— 同样需显式关闭，否则 hover 后的过渡可能在打印前最后一刻触发
别漏掉伪元素和动态类名控制的动画
很多加载动画、状态指示器藏在 ::before/::after 里，或者靠 JS 切换 .is-loading 类来启停。这些在打印时一样生效：
- 必须在
@media print中也给::before, ::after加上animation: none等规则 - 如果用了 BEM 或 utility class（如
animate-pulse），得把它们一并纳入 print 媒体查询作用域，否则 class 仍会生效 - 避免依赖 JS 控制打印时的动画状态——CSS 媒体查询是唯一可靠、无需 JS 干预的时机
测试时注意 Chrome 打印预览的“渲染快照”特性
Chrome 的打印预览不是实时渲染，而是截取当前 DOM + 样式快照。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 如果动画正处在中间帧（比如
opacity: 0.3），打印出来的就是那个中间态，不是初始或结束态 - 即便你加了
@media print，若样式表加载顺序不对（比如 print 规则被后面更具体的 selector 覆盖），依然无效 - 推荐在打印前手动触发一次
window.matchMedia('print').matches检查，或用 DevTools 的 Rendering 面板开启 “Emulate CSS media” → “print” 实时验证
