CODEWITHSUNDEEP
htmlcss
Ferdousi
Ferdousi

Reputation: 339

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

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.sstatic.net/qgNyF.png?s=328&g=1"width = "100px" height ="100px">
</div>

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

Upvotes: 3

Views: 1369

Answers (4)

Shoaibinfotech
Shoaibinfotech

Reputation: 1

#pot{

position:absolute;
-webkit-animation:both;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}     
@-webkit-keyframes run {
    50% { left:  50%;}
    0%{ left : 0%;}
}
<div id = "pot">
<img src = "https://imgur.com/gallery/GLyfR" width = "100px" height ="100px">
</div>

You can use this https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-direction

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272955

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.sstatic.net/qgNyF.png?s=328&g=1" width="100px">
</div>

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

Upvotes: 1

doğukan
doğukan

Reputation: 27421

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.sstatic.net/qgNyF.png?s=328&g=1" width="100px" height="100px">
    <img src="https://i.sstatic.net/qgNyF.png?s=328&g=1" width="100px" height="100px">
  </div>
</div>

Upvotes: 4

Ferdousi
Ferdousi

Reputation: 339

#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.sstatic.net/qgNyF.png?s=328&g=1"width = "100px" height ="100px">
</div>

Upvotes: 0

Related Questions