吃豆人动画核心是保持border-radius: 50%不变，仅用transform: rotate()与遮罩层（伪元素或radial-gradient）配合实现平滑开合；禁用border-radius动态变化，避免layout thrashing，推荐动画时长0.4s~0.6s。
吃豆人动画的核心是 border-radius 与 transform: rotate() 的配合
纯 CSS 实现吃豆人张嘴闭嘴，本质不是“画一张嘴”，而是用一个圆形裁出扇形缺口。关键在于：用 border-radius: 50% 得到正圆，再通过 clip-path 或「错位遮罩」模拟开口——但最轻量、兼容性最好的方式其实是旋转一个带缺口的圆弧形元素。不过更常用且稳妥的做法是：用两个重叠的 div，底层是完整圆，上层是旋转的扇形遮罩（或反向剪裁）。
真正要注意的是：CSS 动画中 rotate() 的起始角度和方向必须和 border-radius 的视觉缺口对齐，否则看起来像在“抖”而不是“咀嚼”。
-
border-radius: 50%是基础，缺了它就不是圆，后续所有旋转都失准 - 缺口角度建议用
clip-path: inset(0 0 0 0 round 50% 50% 50% 50%)配合rotate()动态改clip-path值——但 Safari 对clip-path动画支持差，所以更推荐用伪元素 +transform: rotate()遮挡 - 动画时长控制在
0.4s ~ 0.6s之间，太快像抽搐，太慢失去“咀嚼感”
IE 不支持 clip-path，老项目得 fallback 到 radial-gradient 遮罩
如果你的项目还要兼容 IE11 或旧版 Edge，clip-path 直接失效。这时候得换思路：用 background 的 radial-gradient 模拟“被咬掉一块”的效果，再靠 animation 改变渐变位置或大小。
这不是“画一个缺口”，而是“用渐变色盖住一部分圆”，所以底色和渐变色必须严格一致，否则边缘会漏白。
立即学习“前端免费学习笔记（深入）”；
- IE 下只能用
radial-gradient(circle at 50% 50%, transparent 40%, #000 40%)这类写法模拟空心区域 - 注意
background-size和background-position必须设为固定值，否则动画过程中渐变中心偏移，缺口“漂移” - Chrome/Firefox 可以用
clip-path: polygon()精确控制缺口形状，但 IE 完全不认，别试图加前缀
@keyframes 中避免直接写 border-radius: 0% / 50% 动态变化
有人想偷懒，直接在关键帧里改 border-radius 的百分比来“拉开嘴”，比如从 50% / 50% → 0% / 50%。这会导致浏览器重绘整个盒模型，动画卡顿，而且在 Safari 上容易出现锯齿或渲染撕裂。
真正平滑的方式是保持 border-radius: 50% 不变，只动 transform 和 clip-path（或遮罩层位置）。
- 不要在
@keyframes里写border-radius: 50% 50% 0% 0%这类非对称值——它不是“张嘴”，是“变形” - 如果非要用
border-radius动画，仅限于整圆→整圆的过渡（如呼吸缩放），不能用于模拟咀嚼 - 移动端 iOS Safari 对
clip-path动画有性能警告，建议加will-change: transform提前提示渲染引擎
动画循环卡顿？检查是否触发了 layout 或 paint
吃豆人转着转着突然一卡，大概率不是代码写错了，而是无意中触发了强制同步布局（layout thrashing）。常见诱因是：在动画中读取 offsetWidth、getBoundingClientRect()，或者用了 box-shadow + transform 混合导致图层合并失败。
吃豆人这种小动效，应该全程只依赖 transform 和 opacity，这两者能走 GPU 合成，其他属性尽量不动。
- 删掉所有
top/left定位，改用transform: translate() - 阴影用
filter: drop-shadow()替代box-shadow，后者在动画中更容易掉帧 - 确保父容器没设
overflow: hidden且子元素有transform: translateZ(0)强制硬件加速（但别滥用，iOS 上过多图层反而更卡）
吃豆人看着简单，但每一步旋转、每一次开合，背后都是渲染管线在做权衡。最容易被忽略的，是把“动起来”和“动得顺”当成一回事——其实前者靠写对，后者靠避开那些看不见的 layout 陷阱。