为什么动效师更在意「透明 MP4 转 WebP」而不是单纯体积数字？
网页叠加层最怕两件事：透明通道在导出链路里被压成黑底，以及半透明边缘在深浅主题切换时露馅。用户常搜「ae 导出 透明 mp4」「网页 动效 webp alpha」「动图 黑边 去掉」「叠加层 性能」——说明需求已从「能播」升级到「能叠、还能轻」。动画 WebP 在支持良好的浏览器里可以同时携带 alpha 与较小体积，但实现上要与 CSS `mix-blend-mode`、父级背景模糊与 `backdrop-filter` 交互测试，否则会出现你以为是 WebP 问题其实是合成顺序问题。若 MP4 源本身用 RGB+Alpha 输出却在某些播放器里看起来正常、在浏览器里发灰，多半是预乘设置不一致，需要在动效软件里先校正再进入转码。
透明 MP4 转动画 WebP 的合成前检查
- 在 AE/剪辑导出前确认项目色彩管理与 alpha 通道模式（预乘或直通）与下游 Web 约定一致，并导出短样条 MP4 在目标浏览器里叠在黑白底上肉眼验边。
- 在 MP4 转 WebP 中选择透明变体，避免额外缩放引入插值杂边；若动效含细发丝或烟雾，适当提高质量档位或简化粒子数量再试导。
- 把 WebP 嵌入页面后，在浅色/深色主题、带背景图与纯底色三种容器里各测一次滚动与固定定位场景，确认与导航栏投影不产生意外抠边后再合并主干。
透明 MP4 转 WebP 常见问答
为什么我的透明动画 WebP 在 Figma 预览里正常，一到生产站点叠在照片背景上就出现一圈亮边，这算是编码 bug 还是 CSS 合成问题？
先隔离变量：用纯 HTML 叠同一张底图测试；若仅生产环境有问题，检查父级是否开启滤镜、混合模式或子像素定位；编码侧再尝试调整预乘与质量，避免双管齐下找不到根因。
当设计同时要求在 iOS Safari 与 Android Chrome 上保持透明动效一致时，动画 WebP 与视频方案应如何取舍与兜底？
应以浏览器支持矩阵为准：动画 WebP 覆盖不到的版本准备静态 PNG 或短视频；同时记录各端实际下载体积，避免 iOS 端默默走兜底却无人监控。
从带预乘 alpha 的 MP4 转 WebP 时，若源里含有运动模糊与强烈光晕，为什么更容易出现块状透明断层、应优先在源里修还是提高 WebP 质量？
应先减少极端半透明叠层与重粒子效果，再适度提高质量；单纯拉高码率往往只增加体积却对断层帮助有限，必要时拆成两层静态加轻微位移。
在电商详情页把促销角标做成透明动画 WebP 叠在主图上，对 CLS 与可访问性各有哪些容易被忽略的副作用？
动效可能改变可见区域布局导致 CLS，应为角标预留固定占位；动效无法被屏幕阅读器读取，需要 `aria-hidden` 与等价的促销文案，避免只靠闪烁吸引注意。
多品牌白标站点共用一套透明挂件 WebP，若某客户站点的全局 CSS 滤镜与我们的动效冲突，有没有工程化的回归检测建议？
把关键页面加入视觉回归与跨浏览器截图流水线，对客户主题分支跑一遍叠加层用例；问题定位后把不兼容的 CSS 规则写入组件禁忌文档而不是个案修修补补。