Aisha Salman Aisha Salman - 3 months ago 8
CSS Question

How to move element from initial state to right and then from initial state to left?

There is a hand icon that I am using on my page and It is directing to three images.I want an animation on this icon, where It should move from initial state to right, then from initial state to left and so forth.In other words, it should cover all the three images.
I have tried myself also, it is moving initial state to right but not from initial state to left.Here is my code snippet down below:



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>





Please guide me and thank you in advance!

Answer

I posted another answer with your exact mark up. You were using both right and left. When you're animating, you should make sure you're animating on the same property/properties, which in this case is left.

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>

Comments