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

我刚开始使用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;
  }
}

代码：

功能睡眠（毫秒）{
返回新承诺（resolve=>setTimeout（resolve，ms））；
}
睡眠（3000）。然后（（）=>{
document.getElementsByClassName（'element'）[0].setAttribute（'id'，'visible'）
对于（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'））
}
})

#隐藏{
显示：无；
}
#可见的{
位置：绝对位置；
}
.文本{
显示：块；
高度：100px；
}
.Sn{
浮动：左；
宽度：100px；
}
.团队名称{
宽度：100px；
浮动：左；
}
.赢{
宽度：100px；
浮动：左；
}
.输{
宽度：100px；
浮动：左；
}
.抽签{
宽度：100px；
浮动：左；
}
.总数{
宽度：100px；
浮动：左；
}
#动画{
动画：滑动模糊平移0.6s三次贝塞尔（0.230,1.000,0.320,1.000）二者；
}
@关键帧滑动模糊平移{
0% {
-webkit转换：translateY（-1000px）scaleY（2.5）scaleX（0.2）；
转换：translateY（-1000px）scaleY（2.5）scaleX（0.2）；
-webkit转换来源：50%0%；
变换原点：50%0%；
-webkit过滤器：模糊（40px）；
过滤器：模糊（40px）；
不透明度：0；
}
100% {
-webkit转换：translateY（0）scaleY（1）scaleX（1）；
变换：translateY（0）scaleY（1）scaleX（1）；
-webkit转换来源：50%50%；
变换原点：50%50%；
-webkit过滤器：模糊（0）；
过滤器：模糊（0）；
不透明度：1；
}
}

你好
123
朋友
你好
123
朋友
你好
123
朋友
你好
123
朋友
你好
123
朋友
你好
123
朋友
你好
123
朋友
你好
123
朋友

您能给我们展示一下您正在制作的动画吗？尤其是一张图像/几张。。。。也许可以制作一个工作片段，让我们自己看看问题所在——你使用的是哪种浏览器/系统？我没有看到任何变化——在Windows10笔记本电脑上的Chrome/Firefox/Edge和iPad IOS 14.2上的Safari上制作一幅图像的动画。我正在使用Windows10通过java脚本制作多个div的动画，其中包含多个文本，动画延迟Chrome/Edge浏览器。你能不能拿出一个代码片段来说明问题，比如说，包括任何相关的HTML/JS，因为我不能仅使用你提供的CSS来复制它。@AHaworth我添加了一个示例代码，请看一看。动画在刷新后会变得更平滑…你能给我们展示一下你正在制作的动画吗？尤其是一张图片/几张。。。。也许可以制作一个工作片段，让我们自己看看问题所在——你使用的是哪种浏览器/系统？我没有看到任何变化——在Windows10笔记本电脑上的Chrome/Firefox/Edge和iPad IOS 14.2上的Safari上制作一幅图像的动画。我正在使用Windows10通过java脚本制作多个div的动画，其中包含多个文本，动画延迟Chrome/Edge浏览器。你能不能拿出一个代码片段来说明问题，比如说，包括任何相关的HTML/JS，因为我不能仅使用你提供的CSS来复制它。@AHaworth我添加了一个示例代码，请看一看。动画是滞后的，在第一次刷新后，它变得更平滑。。。