要素を初期状態から右側に、次に初期状態から左に移動する方法はありますか？

Question

私のページには手のひらアイコンがあり、それは3つの画像を指しています。このアイコンには初期状態から右に、次に初期状態から左に移動する必要があるアニメーションが必要です。言い換えれば、3つの画像すべてをカバーする必要があります。

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>

が私を導き、でお願いしてください： 私はそれを右に初期状態に動いているではなくleft.Hereに初期状態から下方に以下の私のコードスニペットがあり、また、自分自身を試してみました前進！

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>