最可控的动态图方案是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。
立即学习“前端免费学习笔记（深入）”；
插件描述：vidbacking是一款响应式的，跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景。如果浏览器不支持HTML5视频，插件会自动将背景回退为指定的背景图片。
- 检查是否真生效：打开 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防闪烁，但别滥用，否则触发过多图层合成反而卡
