Html 智能手机上的SVG动画不平滑

我已经用css动画为SVG设置了动画。电脑上的动画很流畅，但Android智能手机上的动画绝对不流畅：(

遗憾的是，我没有在智能手机上找到那么多关于svg平滑度的信息：X

我尝试过will change、translate3d和steps，但都没有效果，也没有改变任何东西

*{
填充：0；
保证金：0；
}
身体{
背景色：#161616；
}
#小中风{
动画名称：s_small；
动画持续时间：.5s；
动画方向：交替；
动画计时功能：轻松进出；
动画填充模式：正向；
变换原点：中心；
将更改：变换、不透明度、旋转；
变换：translate3d（0,0,0）；
}
#大中风{
动画名称：s_big；
动画持续时间：.6s；
动画方向：交替；
动画计时功能：轻松进出；
动画填充模式：正向；
变换原点：中心；
将更改：变换、不透明度、旋转；
变换：translate3d（0,0,0）；
}
@关键帧s_小{
0%{
变换：缩放（0）旋转（90度）；
不透明度：0；
}
95%{
变换：缩放（1.2）旋转（90度）；
}
100%{
变换：缩放（1）旋转（90度）；
不透明度：1；
}
}
@关键帧s_大{
0%{
变换：比例（0）；
不透明度：0；
}
80%{
转换：比例（1.4）；
不透明度：0.3；
}
100%{
变换：比例（1）；
不透明度：1；
}
}
#包裹{
高度：500px；
转换：翻译（0,50%）；
}
svg{
身高：100%；
宽度：100%；
}

---

可能是您正在使用的SVG过滤器

它们似乎没什么作用。试着移除它们。还有一个剪辑路径也没用

*{
填充：0；
保证金：0；
}
身体{
背景色：#161616；
}
#小中风{
动画名称：s_small；
动画持续时间：.5s；
动画方向：交替；
动画计时功能：轻松进出；
动画填充模式：正向；
变换原点：中心；
将更改：变换、不透明度、旋转；
变换：translate3d（0,0,0）；
}
#大中风{
动画名称：s_big；
动画持续时间：.6s；
动画方向：交替；
动画计时功能：轻松进出；
动画填充模式：正向；
变换原点：中心；
将更改：变换、不透明度、旋转；
变换：translate3d（0,0,0）；
}
@关键帧s_小{
0%{
变换：缩放（0）旋转（90度）；
不透明度：0；
}
95%{
变换：缩放（1.2）旋转（90度）；
}
100%{
变换：缩放（1）旋转（90度）；
不透明度：1；
}
}
@关键帧s_大{
0%{
变换：比例（0）；
不透明度：0；
}
80%{
转换：比例（1.4）；
不透明度：0.3；
}
100%{
变换：比例（1）；
不透明度：1；
}
}
#包裹{
高度：500px；
转换：翻译（0,50%）；
}
svg{
身高：100%；
宽度：100%；
}

---

谢谢，滤镜应该在背景为白色时使用……所以目前它没有用……我想是滤镜让它变得不平滑了吧？