html5 中的动态图如何做的

最可控的动态图方案是canvas配合requestanimationframe——可精确控制帧率、暂停、缩放，且避免gif解码限制；需预加载图像、清空画布、对齐png序列序号。

用 canvas 逐帧画图是最可控的方式

html5 本身没有“动态图”原生标签，所谓 GIF 替代方案，本质是自己控制绘图节奏。用 canvas 配合 requestAnimationFrame 是目前最通用、最灵活的做法——能精确控制帧率、跳帧、暂停、缩放，还不受浏览器对 GIF 解码的限制。

常见错误现象：setTimeout 做定时器导致掉帧、卡顿；直接用大量 img 标签切换 src 触发重排；或误以为 video 标签能当“透明动态图”用（实际不支持 alpha 通道逐帧合成）。

• 必须用 requestAnimationFrame 而非 setInterval，它和屏幕刷新率同步，更稳
• 每帧前调用 ctx.clearRect(0, 0, canvas.width, canvas.height)，否则上一帧残留
• 图像资源要提前用 new Image() 加载完成再开始动画，否则第一帧空白或报错 InvalidStateError
• 如果图源是多帧 PNG 序列，注意文件名序号对齐（frame_001.png 到 frame_120.png），别漏帧或错位

WebP 动图在现代浏览器里开箱即用但有兼容死角

chrome、edge、firefox 120+、safari 17.4+ 都支持带动画的 .webp，语法和普通 img 一样：<img src="anim.webp" alt="html5 中的动态图如何做的" >。它比 GIF 体积小、支持半透明，也不需要 js。

但坑很实在：Safari 17.3 及更早版本会静止显示第一帧；android webview（尤其旧版）可能完全不识别；微信内置浏览器（X5 内核）至今不支持动画 WebP。

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

• 检查是否真生效：打开 DevTools → Network → 找到该 .webp 请求，看响应头是否有 Content-Type: image/webp 且预览能动
• 不能依赖 onload 判断动画就绪——WebP 动画加载完也不代表第一帧已渲染，得监听 canplay 或用 decode() 确保解码完成
• fallback 方案不是加个 <picture></picture> 就行：GIF 无法替代 WebP 的半透效果，且 ios Safari 对 GIF 的帧率限制极死（常卡在 10fps）

用 video 模拟动态图时 Alpha 通道是最大雷区

很多人拿 video 标签播 .mp4 来替代 GIF，因为体积小、可控制播放。但一旦需要透明背景（比如叠加在渐变色上），立刻踩坑：H.264 不支持 alpha，AV1 支持但浏览器支持度差（Chrome 114+ 才开始稳定，Firefox 还没放开）。

错误现象：导出的带透明通道 MP4 在 video 里显示为黑底；用 ffmpeg 加了 -pix_fmt yuva420p，但 Safari 直接不加载；或者硬套 mix-blend-mode: multiply 想“模拟透明”，结果文字边缘发灰。

• 真要透明动效，优先选 WebP（有支持）或 canvas + PNG 序列（完全可控）
• 若坚持用 video，导出时用 libvpx-vp9 编码 + -pix_fmt yuva420p，并确认 MIME 类型是 video/webm
• video 的 poster 属性不会随动画变化，首帧静态图得单独切一张 PNG，否则加载中露白或黑底

用 CSS @keyframes 做“伪动态图”只适合简单状态切换

纯 CSS 动画没法驱动像素级变化，所以它不是做动态图的正路，而是用来补简单场景：比如 loading 图标旋转、按钮悬停闪动、三帧图标切换（✅ → ? → ❌）。优势是零 JS、硬件加速快、无加载延迟。

典型翻车点：试图用 background-image 切换多个图片 URL 实现“帧动画”，结果浏览器疯狂重请求、内存暴涨；或用 steps(3) 控制雪碧图，但没设 background-size 和 background-position 精确偏移，图直接错位。

• 雪碧图动画必须用 background-position 移动，且 steps() 参数要等于帧数减一（3 帧写 steps(2)）
• 不要在 @keyframes 里写 background-image: url(...)，它不触发重绘，只会闪一下
• 移动端要注意 will-change: background-position 防闪烁，但别滥用，否则触发过多图层合成反而卡

事情说清了就结束。真正难的不是选哪种技术，而是想清楚：这图要不要透明？用户主要用什么设备？动效是否需要交互控制？这三个问题没答案，后面全在填坑。