Html 动画CSS文本下划线

我已经创建了这个动画下划线，但底部似乎静止不动，而其他一切都在移动-使它看起来“laggy”

我创建了一个代码笔来说明这个问题。 你知道为什么会这样吗

.分隔器体{
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
保证金：0；
填充：0；
}
.分频波{
宽度：30%；
身高：10%；
背景：白色；
溢出：隐藏；
}
.分频器波：之前{
内容：attr（数据文本）；
位置：相对位置；
顶部：-42px；
颜色：白色；
字号：4em；
文字装饰风格：波浪形；
文字装饰颜色：#607d8b；
文字装饰线：下划线；
动画：动画0.5s线性无限；
}
@关键帧设置动画
{
0%
{
左：0；
}
100% 
{
左：-30px；
}
}

文字装饰风格：波浪形；没有很好的支持：

我建议将其作为背景图像，背景重复：重复；并设置“背景位置”属性的动画

---

背景动画将更加平滑。

短时间检查显示线条向后移动，这导致了问题。这种情况也发生在左侧，但通过将线移出容器，它将不再可见。解决办法很简单；容器的宽度应为线的长度减去线的移动距离

width: 1130px;

视觉：

要解决行问题（不考虑实际的浏览器支持），请尝试使用

文本装饰行：行通过属性和值。为了演示，我改变了位置


。分隔器主体{
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
保证金：0；
填充：0；
位置：相对位置；
}
.分频波{
宽度：30%；
身高：10%；
背景：白色；
溢出：隐藏；
}
.分频器波：之前{
内容：attr（数据文本）；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
颜色：白色；
字号：4em；
文字装饰风格：波浪形；
文字装饰颜色：#607d8b；
文字装饰线条：线条贯穿；
动画：动画0.5s线性无限；
}
@关键帧设置动画{
0% {
左：0；
}
100% {
左：-30px；
}
}


width: 1130px;