CSS关键帧动画中的模糊过滤器使动画断断续续（非平滑）。如何使用模糊滤镜实现平滑动画？

Question

我刚开始使用 CSS 动画。我遇到了这个问题。当我使用模糊滤镜时，动画变得非常断断续续，但是当我刷新窗口时，它会变得稍微平滑一些，当我不断刷新时 它变得更平滑。当我重新启动浏览器时，它再次显示断断续续的动画。请帮我解决这个问题。

@keyframes slide-blur-translation {
  0% {
    -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
            transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}

代码：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
sleep(3000).then(() => {
  document.getElementsByClassName('element')[0].setAttribute('id', 'visible')
  for (i = 1; i < 9; i++) {
    document.getElementsByClassName(`text${i}`)[0].setAttribute('style', `animation-delay:${0.07+(0.14*(i-1))}s;`)
    document.getElementsByClassName(`text${i}`)[0].setAttribute('id', 'animation')

  }
})

#hidden {
  display: none;
}

#visible {
  position: absolute;
}

.text {
  display: block;
  height: 100px;
}

.Sn {
  float: left;
  width: 100px;
}

.teamname {
  width: 100px;
  float: left;
}

.win {
  width: 100px;
  float: left;
}

.lose {
  width: 100px;
  float: left;
}

.draw {
  width: 100px;
  float: left;
}

.total {
  width: 100px;
  float: left;
}

#animation {
  animation: slide-blur-translation 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

@keyframes slide-blur-translation {
  0% {
    -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
    transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}

<div class="element" id='hidden'>
  <div class='text1 row2'>

    <div class='Sn Sn8'>Hello</div>

    <div class='draw draw8'>123</div>
    <div class='total total8'>Friends</div>

  </div>
  <div class='text2 row2'>

    <div class='Sn Sn8'>HELLO</div>

    <div class='draw draw8'>123</div>
    <div class='total total8'>Friends</div>

  </div>
  <div class='text3 row2'>

    <div class='Sn Sn8'>HELLO</div>

    <div class='draw draw8'>123</div>
    <div class='total total8'>Friends</div>

  </div>
  <div class='text4 row2'>

    <div class='Sn Sn8'>HELLO</div>

    <div class='draw draw8'>123</div>
    <div class='total total8'>Friends</div>

  </div>
  <div class='text5 row2'>

    <div class='Sn Sn8'>HELLO</div>

    <div class='draw draw8'>123</div>
    <div class='total total8'>Friends</div>

  </div>
  <div class='text6 row2'>

    <div class='Sn Sn8'>HELLO</div>

    <div class='draw draw8'>123</div>
    <div class='total total8'>Friends</div>

  </div>
  <div class='text7 row2'>

    <div class='Sn Sn8'>HELLO</div>

    <div class='draw draw8'>123</div>
    <div class='total total8'>Friends</div>

  </div>
  <div class='text8 row2'>

    <div class='Sn Sn8'>HELLO</div>

    <div class='draw draw8'>123</div>
    <div class='total total8'>Friends</div>

  </div>
</div>