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

Question

在我的页面上有一个手形图标，它指向三个图像。我想要一个动画图标，它应该从初始状态移动到右侧，然后从初始状态移动到左侧等等。换句话说，它应该涵盖所有三个图像。 我曾尝试自己也，它是移动的初始状态，以正确的，但不能从初始状态到left.Here是我的代码片段楼下：

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

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

.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%} 
 
}

<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>