如何用CSS和HTML创建垂直动画滚动条？动态版本异常求助

你遇到的最后一个元素与第一个元素同时显示的问题，核心是动画时长的计算逻辑错误：

• 动态版本中，你将动画时长设为(($total_tickers - 1) * 2.5)s，导致总动画周期小于所有元素轮播一次的总时长
• 最后一个元素的动画启动延迟恰好等于动画时长，所以它的动画启动时，第一个元素的下一轮动画也同时启动，造成重叠

将动画时长从(($total_tickers - 1) * 2.5)s修改为($total_tickers * 2.5)s，让动画总周期等于所有元素轮播一次的总时长（每个元素占2.5s间隔）。

修改后的SCSS代码：

$total_tickers: 7;
.list {
  position: relative;
  width: 100%;
  height: 40px;

  .item {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(10px);
    text-align: center;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  @for $i from 1 to ($total_tickers + 1) {
    .ticker_#{$i} {
      animation: appear
        #{($total_tickers * 2.5)}s  // 修改为总元素数×2.5
        #{(($i - 1) * 2.5)}s
        infinite
        ease;
    }
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  7% {
    opacity: 1;
    transform: translateY(0);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  14% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

修改后，每个元素的动画周期等于所有元素轮播一遍的总时长：

• 第N个元素的启动延迟为(N-1)*2.5s，刚好在前一个元素结束展示后启动
• 动画总时长覆盖完整轮播周期，最后一个元素的动画结束阶段（opacity变为0）完成后，第一个元素的下一轮动画才会启动，彻底避免重叠

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