CSS Animation实现#container内元素从右向左移动失效求助

问题原因 #

你的代码存在三个核心错误导致动画无法生效、效果不符合预期：

• 语法错误：原生CSS不支持选择器嵌套，你将@keyframes moving写在了.items的样式块内部，浏览器无法识别该动画声明，动画本身没有被成功注册
• 逻辑错误：你动画控制的background-position属性仅用于调整元素背景图片的位置，完全不会改变元素自身的坐标，自然看不到元素移动的效果
• 配置错误：你给每个独立的.items加了动画，而你要实现的是整行元素整体左移，正确做法是将动画绑定在父容器#container上

修正后代码 #

CSS代码 #

#container {
  display: grid;
  align-items: stretch;
  /* 如果需要无缝循环，这里改成repeat(12, minmax(300px, 1fr))，同时HTML复制6份items */
  grid-template-columns: repeat(6, minmax(300px, 1fr));
  grid-column-gap: 30px;
  grid-row-gap: 20px;
  overflow: hidden;
  width: 100%;
  animation: moving 30s infinite linear;
}

.items {
  height: 210px;
  background-color: blue;
}

@keyframes moving {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 移动距离为单行总宽度：6*300px + 5*30px = 1950px */
    transform: translateX(-1950px);
  }
}

HTML代码（基础版） #

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

无缝循环优化 #

如果需要避免滚动到末尾跳回的突兀感，实现完全无缝的无限循环，可将HTML中的.items复制6份（总共12个元素），同时把CSS中grid-template-columns参数改为repeat(12, minmax(300px, 1fr))即可，其余代码不需要调整。

内容的提问来源于stack exchange，提问作者user16486966