H5中CSS关键帧动画规范需命名语义化（小驼峰、禁关键字）、只动画可合成属性（transform/opacity等）、显式声明duration/fill-mode/iteration，并加WebKit前缀、监控FPS、低端机降级。
在 H5 项目中规范 CSS 关键帧动画，核心是让命名可读、可维护，同时确保动画不卡顿、不掉帧、不干扰主线程。团队协作下，光靠个人经验容易混乱，必须建立轻量但明确的标准。
动画命名：语义化 + 小驼峰 + 无歧义
命名不是随便起个名字，而是要让人一眼看懂“动什么、怎么动、用在哪”。推荐统一用小驼峰（fadeIn、slideFromLeft、rotateSpin），避免连字符或空格（slide-in 和 slide in 在 Safari 旧版本中可能失效）。
- 禁止使用 CSS 关键字作名称，如 auto、width、none，否则动画静默失败
- 大小写严格区分：fadeOut 和 fadeout 是两个动画，命名冲突时以最后定义的为准
- 组件级动画建议加前缀，比如 cardSlideIn、btnPulse，避免全局命名污染
- 不推荐纯数字或缩写命名（如 a1、f-i），调试和交接成本高
关键帧内容：只动可合成属性，禁用高开销样式
浏览器对不同 CSS 属性的动画处理差异极大。触发 layout 或 paint 的属性（如 height、width、top、left、margin）会强制重排重绘，导致 H5 页面在低端安卓机上严重掉帧。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- ✅ 推荐动画属性：transform（translate/scale/rotate）、opacity、background-color、filter
- ❌ 禁止直接动画：display、visibility（不可插值）、height（设为 auto 时失效）、box-shadow（重绘开销大，可用 transform 替代位移感）
- 若需模拟高度展开，用 max-height + 具体数值（如 max-height: 0 → max-height: 200px），而非 height
- 复杂动画建议开启硬件加速：给动画元素加 will-change: transform（仅在必要时，避免滥用）
动画行为：显式声明 duration、fill-mode 和 iteration
CSS 动画不会自动播放，缺一不可。团队常因漏写某一项导致“写了却不动”，尤其在 H5 多端适配场景下更易出问题。
立即学习“前端免费学习笔记（深入）”；
- animation-duration 必须设置且 ≠ 0s，哪怕只是 0.01s；省略或为 0s 时动画不执行
- 动画结束后默认恢复初始状态，如需保持末帧效果，必须加 animation-fill-mode: forwards
- 循环动画明确写 animation-iteration-count: infinite，避免依赖默认值（默认是 1）
- H5 中慎用 animation-delay 负值（如 -1s），虽可实现“从中间开始”，但部分安卓 WebView 行为不一致，建议用 JS 控制播放时机更稳妥
性能兜底：控制帧率、降级与监控
H5 运行环境碎片化严重，不能只靠开发机测试。需从代码层做兼容性与降级准备。
- 所有关键帧规则必须加 @-webkit-keyframes 前缀（尤其针对 iOS 14 以下和部分安卓 WebView）
- 上线前用 Chrome DevTools 的 Rendering 面板勾选 “FPS meter” 和 “Paint flashing”，确认动画是否稳定在 60FPS
- 对低端设备可 JS 检测并关闭非核心动画：
if ('ontouchstart' in window && /Android|Mobile/i.test(navigator.userAgent)) { document.documentElement.classList.add('low-end'); }，再用 .low-end .animate { animation: none !important; } 降级 - 避免单个 @keyframes 规则超过 8 个关键帧节点，过度细分反而增加浏览器插值计算负担
