是否可以连续为 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>