如何实现流畅的CSS Blob动画？解决关键帧卡顿问题

API 探路者

2026-7-28

解决CSS Blob变形动画卡顿问题

你的Blob动画在关键帧节点出现卡顿，核心原因是关键帧端点的速率突变以及分散的transform属性触发额外重绘，以下是具体优化方案：

优化要点

把单独的scale属性合并到transform中，让浏览器只处理一个复合变换属性，减少计算开销
替换ease-in-out为更平滑的自定义贝塞尔曲线，避免关键帧端点的速率骤变
添加will-change提示浏览器提前优化动画属性，提升渲染流畅度
确保关键帧中border-radius的数值变化逻辑连贯，避免突兀的形状跳转

优化后的代码

CSS

#blob {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 合并translate和scale到同一个transform属性 */
  transform: translate(-50%, -50%) scale(1);
  width: 150px;
  height: 120px;
  background: #4285f4;
  border-radius: 59% 41% 60% 40% / 47% 51% 49% 53%;
  /* 使用自定义贝塞尔曲线，替换ease-in-out */
  animation: blob-float 8s cubic-bezier(0.3, 0.1, 0.3, 0.9) infinite;
  /* 提示浏览器提前优化这些属性 */
  will-change: transform, border-radius;
}

@keyframes blob-float {
  0% {
    border-radius: 59% 41% 60% 40% / 47% 51% 49% 53%;
    transform: translate(-50%, -50%) scale(1);
  }
  25% {
    border-radius: 50% 50% 48% 52% / 58% 40% 60% 42%;
    transform: translate(-50%, -50%) scale(0.88);
  }
  50% {
    border-radius: 63% 37% 59% 41% / 40% 28% 72% 60%;
    transform: translate(-50%, -50%) scale(0.97);
  }
  75% {
    border-radius: 37% 63% 31% 69% / 66% 43% 57% 34%;
    transform: translate(-50%, -50%) scale(1.09);
  }
  100% {
    border-radius: 59% 41% 60% 40% / 47% 51% 49% 53%;
    transform: translate(-50%, -50%) scale(1);
  }
}