html - 是否可以连续为 DIV 的旋转木马制作动画？

Question

假设红色框代表我的网页容器，B、C、D 项在容器外。是否可以仅使用 CSS 让元素(A、B、C、D...)像旋转木马一样从左到右自动滚动？

我在网上看到有关如何使用图像执行此操作的示例，但没有看到充满文本且设置宽度的 DIV 的示例？

.container {
  margin: 0 auto;
  width: 800px;
  background: red;
  padding: 36px;
  box-sizing: border-box;
}

.items {
  display: flex;
}

.item {
    box-sizing: border-box;
    margin-left: 72px;
    margin-right: 72px;
    padding: 36px;  
position: relative;
    width: 200px;
    min-width: 200px;
    background: #efefef;
    text-align: center;
    border-radius: 4px;

}

<div class="container">
  <div class="items">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div> 
    <div class="item">D</div>    
  </div>
 </div>

Answer 1

这是一种方法。

.container {
  margin: 0 auto;
  background: red;
  box-sizing: border-box;
  overflow-x: hidden;
}

.items {
  min-height: 200px;
  position: relative;
}

.item {
  box-sizing: border-box;
  padding: 36px;
  position: absolute;
  width: 30%;
  background: #efefef;
  text-align: center;
  border-radius: 4px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: slide-item 4s infinite;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  opacity: 0;
}

.item:nth-child(2) { animation-delay: 1s; }
.item:nth-child(3) { animation-delay: 2s; }
.item:nth-child(4) { animation-delay: 3s; }

@keyframes slide-item {
    0% { left: 150%; opacity: 1; }
   36% { left:  50%; opacity: 1; }
   72% { left: -50%; opacity: 1; }
  100% { left: -50%; }
}

<div class="container">
  <div class="items">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
  </div>
</div>