CODEWITHSUNDEEP
htmlcsscss-animations
Aisha Salman
Aisha Salman

Reputation: 776

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!

Upvotes: 1

Views: 242

Answers (2)

zsawaf
zsawaf

Reputation: 2001

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>

Upvotes: 2

zsawaf
zsawaf

Reputation: 2001

The main difference I think is that I was more specific with my animation. I specified that it should start from center, go to left, go back to center, go to right, then go back to center. 

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

Upvotes: 1

Related Questions