我正在尝试做一个平滑变形的blob，目前为止有以下代码：

#blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 120px;
  background: #4285f4;
  border-radius: 59% 41% 60% 40% / 47% 51% 49% 53% ;
  animation: blob-float 8s ease-in-out infinite;
  scale: 1;
}

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

<div id="blob"></div>

正如你所看到的，在我用CSS定义的每一步中，blob都会“卡住”。我怎样才能使过渡更平滑呢？