Wie man Element vom Anfangszustand nach rechts und dann vom Anfangszustand nach links verschiebt?

Question

Es gibt ein Handsymbol, das ich auf meiner Seite verwende und es richtet sich an drei Bilder. Ich möchte eine Animation auf diesem Symbol, wo es vom Ausgangszustand nach rechts, dann vom Anfangszustand nach links und so weiter gehen soll. Mit anderen Worten, es sollte alle drei Bilder abdecken. Ich selbst habe auch versucht, es Anfangszustand nach rechts bewegt, aber nicht vom Anfangszustand left.Here ist mein Code-Schnipsel unten:

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>

Bitte leite mich und danke in voraus!

Answer 1

posted ich eine andere Antwort mit Ihrer genauen Markierung auf. Du hast sowohl rechts als auch links benutzt. Wenn Sie animieren, sollten Sie sicherstellen, dass Sie für dieselbe Eigenschaft/Eigenschaften animieren, die in diesem Fall übrig ist.

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

Der Hauptunterschied, den ich denke, ist, dass ich mit meiner Animation spezifischer war. Ich habe angegeben, dass es von der Mitte aus beginnen soll, nach links gehen, zurück in die Mitte gehen, nach rechts gehen und dann zurück in die Mitte gehen.

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