css中的闪烁动画问题

我制作了一个看起来像萤火虫的动画，但当开始一个新的循环时，它会一直闪烁

我使用了

-webkit转换样式：preserve-3d和
-webkit背面可见性：隐藏但它们不起作用


这是一个代码笔上的代码示例

我希望动画平滑，不会出现奇怪的闪烁。
因为你从0%的位置开始平移，在另一个距离以100%结束。
尝试匹配0%和100%，以便在动画中出现“组合”

此外，您将从0%提高到2%，并改变了很多距离。这太快了，会造成不必要的影响