Html 如何将元素从初始状态向右移动，然后从初始状态向左移动？

我在我的页面上使用了一个手形图标，它指向三个图像。我希望在这个图标上有一个动画，它应该从初始状态向右移动，然后从初始状态向左移动，依此类推。换句话说，它应该覆盖所有三个图像。 我自己也尝试过，它将初始状态向右移动，而不是从初始状态向左移动。下面是我的代码片段：

div#skill.logo{
填充：20px0；
}
.logos>img{
右边距：10px；
}
.搬家{
位置：相对位置；
动画：无限移动；
动画方向：交替反转；
}
/*手边动画*/
@关键帧移动{
0% {
左：0px；
右：0px；
}
50% {
左：60px；
右：0；
}
100% {
左：0px；
右：60px；
}
}

---

我认为主要的区别在于我的动画更具体。我指定它应该从中心开始，向左，回到中心，向右，然后回到中心

.images{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
位置：相对位置；
}
img{
最大宽度：30%；
高度：自动；
z指数：1；
}
.图标容器{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：10；
}
.图标容器img{
背景色：#fff；
z指数：2；
宽度：30px；
高度：30px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
动画：移动6秒无限；
}
@关键帧移动{
0%{左：50%}
25%{左：15%}
50%{左：50%}
75%{左：85%}
100%{左：50%}
}

---

我发布了另一个答案，上面有你的准确分数。你同时使用了右边和左边。设置动画时，应确保在相同的属性/属性上设置动画，在本例中，该属性为左侧

div#skill.logo{
填充：20px0；
}
.logo，.move容器{
最大宽度：200px；
}
.logos>img{
右边距：10px；
}
.搬家{
位置：相对位置；
动画：移动5s无限；
}
/*手边动画*/
@关键帧移动{
0% {
左：60px；
}
50% {
左：0px；
}
75% {
左：120px；
}
100% {
左：60px；
}
}

---

感谢您的回复！但是你能不能用一种更简单的方式来做？因为我的css与你的完全不同，这对我@zsawaf不起作用