html - 如何使用 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 = "/image/qgNyF.png?s=328&g=1"width = "100px" height ="100px">
</div>

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

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