如何使用 CSS 动画将元素从左向右移动？答案

【问题标题】：How can I use CSS animations to move an element from left to right?如何使用 CSS 动画将元素从左向右移动？
【发布时间】：2021-01-03 19:41:45
【问题描述】：

我想从左侧到右侧为图像设置动画。

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

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

【问题讨论】：

完成后似乎已经 重新进入从左侧，所以你的问题需要更多关注

标签： html css

【解决方案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://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>

【讨论】：

【解决方案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://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>

【讨论】：

【解决方案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://i.stack.imgur.com/qgNyF.png?s=328&g=1"width = "100px" height ="100px">
</div>

【讨论】：