如何使用CSS动画将元素从左到右移动?

Question

我想要将图片从左侧动画到右侧。

#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://istack.dev59.com/qgNyF.webp?s=328&g=1"width = "100px" height ="100px">
</div>

如何从左侧重新进入图像？

- Ferdousi

---

似乎它在完成后已经从左侧重新进入，因此您的问题需要更多的关注。 - vsync

Answer 1

试试这种方式。

#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://istack.dev59.com/qgNyF.webp?s=328&g=1" width="100px" height="100px">
    <img src="https://istack.dev59.com/qgNyF.webp?s=328&g=1" width="100px" height="100px">
  </div>
</div>

- doğukan

Answer 2

使用翻译来获得通用解决方案。

#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://istack.dev59.com/qgNyF.webp?s=328&g=1" width="100px">
</div>

<div id="pot">
  <img src="https://istack.dev59.com/qgNyF.webp?s=328&g=1" width="50px" >
</div>

- Temani Afif

Answer 3

#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://istack.dev59.com/qgNyF.webp?s=328&g=1"width = "100px" height ="100px">
</div>

- Ferdousi

Answer 4

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

你可以使用这个 https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-direction。

- Shoaibinfotech