CSS动画：使元素从右向左移动[重复]答案

【问题标题】：CSS Animation: Making elements moving from right to left [duplicate]CSS动画：使元素从右向左移动[重复]
【发布时间】：2021-08-01 09:12:09
【问题描述】：

div #container 中有一些元素，我想为元素设置动画，让它们从右向左移动，但我不知道为什么它不起作用...

#container {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(6, minmax(300px, 1fr));
  grid-column-gap: 30px;
  grid-row-gap: 20px;
  overflow: hidden;
  width: 100%;
}

.items {
  height: 210px;
  background-color: blue;
  animation: moving 30s infinite linear;
  @keyframes moving {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -900px 0;
  }
}

<div id="container">
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
</div>

【问题讨论】：

标签： css

【解决方案1】：

不要使用background-position，而是使用transform: translate()。你可以阅读它here。
您在.item 中写入了@keyframes，这是不正确的。

  #container {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(12, minmax(300px, 1fr));
  grid-column-gap: 30px;
  grid-row-gap: 20px;
}

.items {
  height: 210px;
  background-color: blue;
  animation: moving 5s infinite linear;
}

@keyframes moving {
  0% {
    transform: translate(0, 0)
  }
  50% {
    transform: translate(-450px, 0)
  }
  100% {
    transform: translate(-900px, 0)
  }
}

<div id="container">
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
</div>

【讨论】：

我可以知道为什么它不是无限的吗？因为到达终点时会滞后一段时间
我的意思是当它到达最后一个元素时，它会回到第一个元素而不是在最后一个元素之后显示第一个元素
现在呢？
更好，但不是理想的结果?我希望第一个元素显示在最后一个元素之后并从右无穷向左移动
还是用CSS代替JavaScript无法实现？