CSS动画（位置）不平滑

我做了一个微妙的背景动作，但效果并不令人满意。当移动它时，你可以看到图像逐像素移动

我如何才能改变它，使它成为一个很好的平滑动画

代码（）：

正文{
填充：50px；
边际0；
高度：100vh；
}
.落地式集装箱{
位置：绝对位置；
右：0；
宽度：计算（100%-100px）；
身高：100%；
动画名称：开始动画；
动画延迟：1s；
动画方向：正常；
动画持续时间：5s；
动画迭代次数：无限；
动画计时功能：轻松；
}
.着陆{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
背景色：红色；
}
@关键帧启动动画{
0% {
左：100px；
}
100% {
左：50px；
}
}

---

对于平滑的CSS位置动画，您需要使用

transform:translate3d

属性

---

对于平滑的CSS位置动画，您需要使用

transform:translate3d

属性

---

这应该像您期望的那样工作：

---

这是使用

transform

属性而不是

left

这应该像您期望的那样工作：

---

这是使用

transform

属性而不是

left

谢谢！正是我想要的。谢谢！正是我想要的。