How can I use CSS animations to move an element from left to right?

user_7477154 0
Viewed 134

I want to animate the image from left side to right side.

#pot{

position:absolute;
-webkit-animation:linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}     
@-webkit-keyframes run {
    0% { left:  0%;}
    100%{ left : 100%;}
}
<div id = "pot">
<img src = "https://i.stack.imgur.com/qgNyF.png?s=328&g=1"width = "100px" height ="100px">
</div>

how can I re-enter the image from left side??

css html
3 Answers

Try this way.

#pot {
  position: relative;
  overflow: hidden;
}

.images {
  animation: run 5s linear infinite;
}

.images img:nth-child(2) {
  position: absolute;
  left: -100%;
}

@keyframes run {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
<div id="pot">
  <div class="images">
    <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px">
    <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px">
  </div>
</div>

user_106987410

use a translation to have a generic solution

#pot {
  overflow:hidden;
}

#pot img{
  position: relative;
  animation: run 2s linear infinite;
}

@keyframes run {
  0% {
    left: 0%;
    transform: translateX(-100%)
  }
  100% {
    left: 100%;
  }
}
<div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px">
</div>

<div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="50px" >
</div>

user_86203330 

#pot{
position:absolute;
-webkit-animation:linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}     
@-webkit-keyframes run {
    0%{ left : -50%;}
    100%{ left: 100%;}
}
<div id = "pot">
<img src = "https://i.stack.imgur.com/qgNyF.png?s=328&g=1"width = "100px" height ="100px">
</div>

user_74771540
Related