CSS蝴蝶动画需分层实现：外层@keyframes控制飞行路径（translate+rotate），内层单独控制翅膀旋转；用SVG替代PNG便于样式控制；精确使用will-change: transform；配合IntersectionObserver按需启停动画。
用 @keyframes 控制蝴蝶路径，别硬写贝塞尔曲线
纯 CSS 实现蝴蝶飞舞，核心不是“画蝴蝶”，而是让一个元素按自然轨迹运动。直接手写 cubic-bezier() 模拟扑翼+飘移极其反直觉，容易卡在“动得不真实”。推荐拆成两层动画：外层用 @keyframes 定义飞行路径（带轻微上下起伏和左右偏移），内层用另一个 @keyframes 单独控制翅膀旋转（transform: rotate()）。这样逻辑清晰，调参也直观。
- 飞行路径用
transform: translateX() translateY() rotateZ()组合，避免触发重排 - 翅膀动画用
transform-origin: center bottom模拟关节摆动，比单纯缩放更轻盈 - 动画时长设为
8s到12s之间，太快像虫子，太慢失真
background-image 用 SVG 蝴蝶比 PNG 更可控
PNG 蝴蝶图一旦要加阴影、缩放或颜色滤镜，边缘易糊、透明通道难调试。SVG 是矢量，直接内联进 HTML 或作为 background-image: url("data:image/svg+xml,...")，能用 CSS 控制 fill、filter，还能单独给翅膀群组加 class 做独立动画。
- 导出 SVG 时勾选 “Responsive” 和 “Minify”，减少体积
- 不要用 Illustrator 默认的
stroke，改用fill+path，否则 CSS 无法修改颜色 - 如果要用多只蝴蝶，每只用不同
id或data-butterfly-id属性，方便 JS 后续干预
用 will-change: transform 防掉帧，但别滥用
蝴蝶动画持续运行时，Chrome 有时会降帧到 30fps 甚至卡顿，尤其页面有滚动或其它动画时。加 will-change: transform 可提前告诉浏览器该元素要动，触发图层提升。但加在父容器或全局上反而拖慢渲染——必须精确加在蝴蝶元素自身上，且只在动画激活时加（可用 JS 切换 class，或用 :hover 触发）。
- 错误写法：
.butterfly { will-change: transform; animation: fly 10s infinite; }—— 页面加载就启用，浪费资源 - 正确写法：
.butterfly.is-animated { will-change: transform; }，JS 在进入视口后添加该 class - 移动端慎用：iOS Safari 对
will-change处理不稳定，可加媒体查询兜底
视口监听 + 动画暂停是省性能的关键
用户没看到蝴蝶时，让它停着比空跑动画强十倍。别依赖 visibility: hidden，它不暂停 CSS 动画。得用 IntersectionObserver 监听进入视口，再切换 animation-play-state。
立即学习“前端免费学习笔记（深入）”；
- HTML 中给蝴蝶加
class="butterfly"和style="animation-play-state: paused;" - JS 里用
observer.observe(document.querySelector('.butterfly'))，进入时设el.style.animationPlayState = 'running' - 退出视口后记得暂停，否则后台标签页里动画仍在消耗 CPU
