如何将元素从初始状态移动到右边然后从初始状态移动到左边？

Question

我在我的页面上有一个手形图标，它指向三个图像。我想要一个动画在这个图标上，它应该从初始状态移动到右边，然后从初始状态移动到左边等等换句话说，它应该覆盖所有三个图像。 我也试过自己，它正在将初始状态移动到右边，但不是从初始状态移动到左边。这是我的代码片段，下面是：

div#skill .logos {
  padding: 20px 0;
}
.logos>img {
  margin-right: 10px;
}
.move {
  position: relative;
  animation: move 2s infinite;
  animation-direction: alternate-reverse;
}
/*Animation on hand*/

@keyframes move {
  0% {
    left: 0px;
    right: 0px;
  }
  50% {
    left: 60px;
    right: 0;
  }
  100% {
    left: 0px;
    right: 60px;
  }
}

<img class="move center-block" src="img/icons/hand-finger-pointing-down.svg" width="60" height="60">
<div class="logos text-center">
  <img src="img/icons/adobe-photoshop.png" width="50" height="50">
  <img src="img/icons/bootstrap-4.svg" width="50" height="50">
  <img src="img/icons/Sublime_Text_Logo.png" width="50" height="50">
</div>

请指导我，并提前感谢你！

Answer 1

我发布了你的确切标记的另一个答案。你正在使用左右两边。当你制作动画时，你应该确保你在相同的属性/属性上制作动画，在这种情况下就是这样。

div#skill .logos {
  padding: 20px 0;
}
.logos, .move-container {
  max-width: 200px;  
}
.logos>img {
  margin-right: 10px;
}
.move {
  position: relative;
  animation: move 5s infinite;
}
/*Animation on hand*/

@keyframes move {
  0% {
    left: 60px;
  }
  50% {
    left: 0px;
  }
  75% {
    left: 120px;
  }
  100% {
    left: 60px;  
  }
}

<div class="move-container">
  <img class="move center-block" src="img/icons/hand-finger-pointing-down.svg" width="60" height="60">
</div>
<div class="logos text-center">
  <img src="img/icons/adobe-photoshop.png" width="50" height="50">
  <img src="img/icons/bootstrap-4.svg" width="50" height="50">
  <img src="img/icons/Sublime_Text_Logo.png" width="50" height="50">
</div>

Answer 2

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

＆＃13;

＆＃13;

.images {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

img {
  max-width: 30%;  
  height: auto;
  z-index: 1;
}

.icon-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.icon-container img {
  background-color: #fff;
  z-index: 2;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: move 6s infinite;
}

@keyframes move {
  0% {left: 50%}
  25% {left: 15%}
  50% {left: 50%}
  75% {left: 85%}
  100% {left: 50%}
}

＆＃13;

<div class="images">
    <img src="http://img06.deviantart.net/25de/i/2012/134/3/1/037_by_koko_stock-d4zq28i.jpg" />
  <img src="http://www.apimages.com/Images/Ap_Creative_Stock_Header.jpg"/>
  <img src="http://platowebdesign.com/articles/wp-content/uploads/2014/10/public-domain-images-free-stock-photos-light-sky-silo-windows-lillyphotographer-1024x684.jpg"/>
  <div class="icon-container">
    <img class="https://cdn3.iconfinder.com/data/icons/touch-gesture-outline/512/double_click_touch_click_finger_hand_select_gesture-512.png"/>  
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;