移动端H5落地页中大量CSS关键帧会显著膨胀体积，可通过结构化管控、按需注入与构建时裁剪三步瘦身：剥离非首屏关键帧、精简定义本身、PurgeCSS白名单保护、服务端启用Gzip/Brotli压缩。
移动端 H5 落地页中大量 CSS 关键帧（@keyframes）会导致 CSS 体积显著膨胀，尤其在动画密集型活动页（如抽奖、倒计时、动效引导）中尤为明显。压缩关键帧本身不能靠简单删减——它们是运行时必需的，但可通过结构化管控、按需注入与构建时裁剪三步实现有效瘦身。
识别并剥离非首屏关键帧
多数落地页动画只在用户交互后触发（如点击弹窗、滑动出现动效），但所有 @keyframes 默认随主 CSS 一次性加载。应将非首屏动画的关键帧单独拆出：
- 用
延迟预取，不阻塞渲染 - 对 JS 触发的动画，改用
document.styleSheets[0].insertRule()动态注入关键帧（仅在需要时创建） - 避免在全局 CSS 中写
@keyframes slideIn, bounce, pulse, shake, fadeInUp...堆砌式定义
精简关键帧定义本身
冗余属性和重复帧是体积膨胀主因。例如一个 10 步贝塞尔缓动动画，若每步都写全 transform、opacity、filter，实际只需关键转折点：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 删除中间过渡帧：保留
0%, 50%, 100%即可，浏览器自动插值 - 合并重复声明：多个关键帧共用同一
transform: translateX()时，提取为公共类 + JS 控制偏移量 - 用 CSS 变量替代硬编码数值：
@keyframes slide-x { 0% { transform: translateX(var(--start, 0)); } 100% { transform: translateX(var(--end, 100px)); } }，复用一套规则驱动多组位移
构建阶段白名单保护 + PurgeCSS 配合
PurgeCSS 默认会误删未显式出现在 HTML/JS 字符串中的关键帧名（如 animation: slideIn 0.3s 写在 JS 里）。必须主动声明白名单：
- 在 PurgeCSS 配置中加入
keyframes: true并显式列出所有用到的关键帧名：['slideIn', 'bounceIn', 'fadeOut'] - 若使用 BEM，确保关键帧名与组件强绑定，如
@keyframes card__slideIn，配合content扫描路径限定在组件模板内，减少误删风险 - 禁用
fontFace: false和variables: false等保守选项，避免连带清除相关 CSS 变量或字体声明
服务端启用 Gzip/Brotli 并限制 MIME 类型
关键帧本身属于纯文本，Gzip 压缩收益极高（通常 70%+）。但要注意配置精度：
- Nginx 中确保
gzip_types text/css明确包含 CSS，且gzip_min_length 1024避免小文件负优化 - 若支持 Brotli（现代安卓/iOS WebView 均兼容），优先启用：
br on; brotli_comp_level 6;，比 Gzip 多压 10–15% - 禁用对
image/*或font/*的压缩，防止 CPU 浪费
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
