如何將元素從初始狀態移動到右側，然後從初始狀態移動到左側？

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>