CSS实现div文本无限向上循环滚动的keyframes设置问题

核心错误点 #

• 动画绑定对象错误：原代码将动画绑定在#flip的第一个子元素上，而非包裹所有滚动条目的公共容器，导致仅单个元素产生位移，其余内容不跟随滚动
• 位移动画逻辑错误：向上滚动需要设置Y轴负方向位移，原代码translateY为正值，元素会向下移动；且百分比位移是相对动画元素自身高度计算，和滚动容器高度不匹配，位移量完全不符合预期
• 布局逻辑错误：原代码给滚动条目设置inline-block属性，会导致条目横向排列，无法实现纵向滚动效果
• 无缝循环逻辑缺失：要实现无跳帧的无限滚动，需要将滚动列表内容复制一份接在原列表末尾，当位移走完原列表总高度时，刚好和初始状态视觉一致，重置位置不会出现空白跳变

修复后可直接运行代码 #

CSS代码 #

#container {
  color:#999;
  text-transform: uppercase;
  font-size:60px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

#flip {
  height:110px;
  overflow:hidden;
  display: inline-block;
  vertical-align: top;
}

.scroll-wrap {
  animation: scrollUp 8s linear infinite;
}

#flip > div > div {
  color:#fff;
  padding:10px 12px;
  height:65px;
  margin-bottom:45px;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    /* 位移值 = 单个条目总高度 * 原列表条目数，向上滚动所以为负值 */
    transform: translateY(-440px);
  }
}

HTML代码 #

<div id="container">
  ENDLESS 
  <div id="flip">
    <div class="scroll-wrap">
      <!-- 原滚动列表 -->
      <div><div>SMOOTHIES</div></div>
      <div><div>MILKSHAKES</div></div>
      <div><div>FRUIT SHAKES</div></div>
      <div><div>COCTAILS</div></div>
      <!-- 复制首项内容接在末尾，实现无缝衔接 -->
      <div><div>SMOOTHIES</div></div>
    </div>
  </div>
  OPTIONS!
</div>

自定义调整说明：你可以根据需要修改动画时长调整滚动速度，keyframes中100%状态的位移值需要等于原列表（不含复制的衔接项）的总高度，向上滚动所以位移值为负，即可保证无缝循环效果。

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