html5中隐藏元素但保留css动画效果应避免display:none，可行方案包括visibility:hidden（占位且动画持续）、opacity:0+pointer-events:none（轻量但慎用于opacity动画）及绝对定位移出视口；puppeteer截图生成gif需启用硬件加速、等待动画完成、全页截图，并用ffmpeg调色板方案合成以保流畅。
HTML5 页面中隐藏元素但保留 CSS 动画效果
直接用 display: none 会让动画彻底停止并从渲染树中移除，无法用于后续转 GIF；真正可行的是视觉隐藏 + 动画保活。关键在于让元素不可见但仍在文档流中持续渲染。
-
visibility: hidden：元素占位、动画照常运行（opacity变化、transform位移等都会继续执行），适合截图/录屏取帧 -
opacity: 0+pointer-events: none：更轻量，但需确认动画是否依赖透明度本身（比如@keyframes里改了opacity就会“显形”） -
绝对定位移出视口：
position: absolute; left: -9999px; top: -9999px，兼容性好，但要注意transform动画可能受容器裁剪影响
用 Puppeteer 截图生成 GIF 前的关键配置
很多失败源于 Puppeteer 默认不等待动画完成或未启用硬件加速。动画帧必须真实绘制出来，否则 GIF 每一帧都是静止的。
- 启动时加
--disable-gpu --no-sandbox --disable-dev-shm-usage参数（尤其在 Docker 或 CI 环境下） - 截图前务必等足够时间：
await page.waitForTimeout(2000)，或监听动画结束事件：await page.evaluate(() => document.querySelector('div').animate(...).finished) - 截图用
page.screenshot({ fullPage: true, type: 'png' })，别用clip裁剪——部分动画可能溢出容器边界
ffmpeg 合成 GIF 时保留动画流畅性的参数要点
直接 ffmpeg -i *.png out.gif 会导致丢帧、卡顿、色带严重。核心是控制帧率、调色板和延迟精度。
