如何为CSS Keyframes实现的垂直新闻滚动条添加条目间延迟？

要解决新闻条目切换无间隔的问题，只需修改关键帧动画，增加停留阶段，并重新计算动画总时长即可。以下是调整后的完整代码：

修改后的CSS代码 #

@-webkit-keyframes ticker {
  /* 第一个条目：停留2秒（0% - 19.05%）*/
  0%, 19.05% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  /* 滚动到第二个条目：1.5秒（19.05% - 33.33%）*/
  19.05%, 33.33% {
    -webkit-transform: translate3d(0, -33.33%, 0);
    transform: translate3d(0, -33.33%, 0);
  }
  /* 第二个条目：停留2秒（33.33% - 52.38%）*/
  33.33%, 52.38% {
    -webkit-transform: translate3d(0, -33.33%, 0);
    transform: translate3d(0, -33.33%, 0);
  }
  /* 滚动到第三个条目：1.5秒（52.38% - 66.66%）*/
  52.38%, 66.66% {
    -webkit-transform: translate3d(0, -66.67%, 0);
    transform: translate3d(0, -66.67%, 0);
  }
  /* 第三个条目：停留2秒（66.66% - 85.71%）*/
  66.66%, 85.71% {
    -webkit-transform: translate3d(0, -66.67%, 0);
    transform: translate3d(0, -66.67%, 0);
  }
  /* 滚动回初始位置：1.5秒（85.71% - 100%）*/
  85.71%, 100% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes ticker {
  /* 第一个条目：停留2秒（0% - 19.05%）*/
  0%, 19.05% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  /* 滚动到第二个条目：1.5秒（19.05% - 33.33%）*/
  19.05%, 33.33% {
    -webkit-transform: translate3d(0, -33.33%, 0);
    transform: translate3d(0, -33.33%, 0);
  }
  /* 第二个条目：停留2秒（33.33% - 52.38%）*/
  33.33%, 52.38% {
    -webkit-transform: translate3d(0, -33.33%, 0);
    transform: translate3d(0, -33.33%, 0);
  }
  /* 滚动到第三个条目：1.5秒（52.38% - 66.66%）*/
  52.38%, 66.66% {
    -webkit-transform: translate3d(0, -66.67%, 0);
    transform: translate3d(0, -66.67%, 0);
  }
  /* 第三个条目：停留2秒（66.66% - 85.71%）*/
  66.66%, 85.71% {
    -webkit-transform: translate3d(0, -66.67%, 0);
    transform: translate3d(0, -66.67%, 0);
  }
  /* 滚动回初始位置：1.5秒（85.71% - 100%）*/
  85.71%, 100% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.news-ticker {
  margin: 0 auto;
  border-radius: 4px;
  padding: 15px;
  background: #CFE2FF;
}

.news-wrapper {
  overflow: hidden;
  padding-left: 30px;
  background: transparent url('https://i.sstatic.net/LhFKIAAd.png') no-repeat left center;
}

.news-ticker ul {
  display: flex;
  flex-direction: column;
  height: 25px;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  /* 总时长 = (停留时间2s + 滚动时间1.5s) × 3个条目 = 10.5s */
  -webkit-animation-duration: 10.5s;
  animation-duration: 10.5s;
}

.news-ticker li {
  color: #0043a7;
  white-space: nowrap;
  flex: 1;
  width: 100%;
}

HTML代码（无需修改） #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid mt-3">
  <div class="news-ticker">
    <div class="news-wrapper">
      <ul class="list-unstyled m-0">
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
        <li>Molestias beatae recusandae ipsam animi non numquam itaque veritatis quaerat totam eligendi.</li>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit aperiam, distinctio.</li>
      </ul>
    </div>
  </div>
</div>

自定义调整说明 #

• 修改停留时间：如果想让每个条目停留3秒，只需把总时长改为 (3 + 1.5) × 3 = 13.5s，然后重新计算关键帧的百分比（比如3秒占13.5秒的比例是3/13.5≈22.22%）
• 修改滚动速度：调整滚动阶段的时间（比如把1.5秒改为1秒），同时对应修改总时长和关键帧百分比

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