如何实现平滑连续的CSS Blob流体动画？

问题描述 #

我尝试制作一个能在自身平面内流畅变形的动态Blob，但当前实现的动画十分生硬，能直接看到0-25-50-75-100关键帧的切换过程。试过linear、ease-in、ease-out及ease-in-out等缓动函数，动画仍卡顿。

更新：尝试了第二个Blob动画，它仍无法平滑过渡，仅来回切换形态。

解决思路与修改方案 #

要实现平滑的Blob动画，核心是避免关键帧之间的形态突变，可以从这几个方面调整：

• 增加关键帧数量，缩小相邻关键帧的形态差异，让过渡更自然
• 调整每个关键帧的border-radius数值，保证圆角变化是连贯的渐进过程，避免某一个角的数值突然大幅跳动
• 加入细微的transform: scale()变化，模拟Blob的呼吸感，增强流畅度
• 配合背景渐变的角度动画（可选），让整体视觉效果更协调

优化后的完整代码 #

CSS代码 #

.shape-container{
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
  background: #1a1a1a;
}

.shape{
  width: 400px;
  height: 400px;
  background: linear-gradient(64deg, #f34868 23%, #f24768 23%, #9e00ec 80%);
  animation: blob 10s ease-in-out infinite;
}

@keyframes blob {
  0%, 100% {
    border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
    transform: scale(1);
  }
  15% {
    border-radius: 30% 70% 40% 60% / 35% 40% 60% 65%;
    transform: scale(1.02);
  }
  30% {
    border-radius: 40% 60% 50% 50% / 45% 55% 45% 55%;
    transform: scale(1);
  }
  45% {
    border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
    transform: scale(0.98);
  }
  60% {
    border-radius: 60% 40% 35% 65% / 55% 40% 60% 45%;
    transform: scale(1);
  }
  75% {
    border-radius: 35% 65% 24% 76% / 32% 68% 32% 68%;
    transform: scale(1.01);
  }
}

HTML代码 #

<div class="shape-container">
  <div class="shape"></div>
</div>

优化说明 #

• 新增多个中间关键帧（15%、30%、45%、60%、75%），让形态变化的每一步都更平缓，避免生硬跳转
• 每个关键帧的border-radius数值基于前一状态微调，保证圆角过渡连贯自然
• 加入transform: scale()的细微缩放变化，模拟Blob自然的呼吸效果，增强动画流畅感
• 延长动画时长至10s，让整体节奏更舒缓，进一步弱化关键帧切换的痕迹

内容的提问来源于stack exchange，提问作者Squish