如何实现无JavaScript、无跳转的无缝循环CSS垂直停顿式标题轮播动画

这个问题我之前做WordPress项目时也碰到过，原方案最后跳回开头的突兀感确实很糟心。其实只要调整一下HTML结构和动画关键帧，就能实现完全无缝的循环效果，全程不用JavaScript。

核心思路 #

原来的动画之所以会跳，是因为最后一帧直接从最后一个标题跳回第一个。我们可以把标题列表完整复制一份，让动画滑完原标题组后，接着滑复制的标题组，最后停在复制的第一个标题（和原第一个标题内容完全一致），这样循环时从这个位置回到初始位置，用户根本察觉不到衔接的痕迹。

适配4个标题的完整实现代码 #

HTML结构（复制标题组是关键）

<span class="headline-rotator">
  <span>Headline 1</span>
  <span>Headline 2</span>
  <span>Headline 3</span>
  <span>Headline 4</span>
  <!-- 复制原标题组，让动画衔接无痕迹 -->
  <span>Headline 1</span>
  <span>Headline 2</span>
  <span>Headline 3</span>
  <span>Headline 4</span>
</span>

CSS样式（调整动画关键帧）

.headline-rotator {
  display: inline-block;
  overflow: hidden;
  height: 1.8em;
  vertical-align: bottom;
}

.headline-rotator span {
  display: block;
  /* 保持原时长12秒，无限循环 */
  animation: rotateHeadlines 12s infinite;
}

@keyframes rotateHeadlines {
  /* 停留标题1 */
  0% { transform: translateY(0); }
  20% { transform: translateY(0); }
  /* 滑到标题2 */
  25% { transform: translateY(-100%); }
  /* 停留标题2 */
  45% { transform: translateY(-100%); }
  /* 滑到标题3 */
  50% { transform: translateY(-200%); }
  /* 停留标题3 */
  70% { transform: translateY(-200%); }
  /* 滑到标题4 */
  75% { transform: translateY(-300%); }
  /* 停留标题4 */
  95% { transform: translateY(-300%); }
  /* 滑到复制的标题1（和原标题1内容一致） */
  100% { transform: translateY(-400%); }
}

适配任意数量的标题 #

如果你的标题数量不是4个，只需要做两个简单调整：

1. HTML部分：把原标题组完整复制一遍（比如3个标题就变成6个，5个就变成10个）
2. CSS关键帧：按标题数量重新计算停留和滑动的百分比。举个例子，3个标题的话，总时长设为9秒（每个标题分配3秒：2.4秒停留+0.6秒滑动），关键帧如下：

@keyframes rotateHeadlines {
  0% { transform: translateY(0); }
  26.67% { transform: translateY(0); } /* 停留标题1 */
  33.33% { transform: translateY(-100%); } /* 滑到标题2 */
  60% { transform: translateY(-100%); } /* 停留标题2 */
  66.67% { transform: translateY(-200%); } /* 滑到标题3 */
  93.33% { transform: translateY(-200%); } /* 停留标题3 */
  100% { transform: translateY(-300%); } /* 滑到复制的标题1 */
}

要是你用Sass/LESS这类预处理器，还可以写个混合宏自动生成关键帧，不用手动算百分比，效率更高。

为什么这样能实现无缝循环？ #

动画最后一帧停在translateY(-400%)（对应4个标题的情况），这个位置显示的是复制的第一个标题，和初始位置的原标题1内容完全一样。当动画循环时，从这个位置瞬间回到translateY(0)，用户看到的还是同一个标题，自然不会有跳转或反向动画的突兀感。

备注：内容来源于stack exchange，提问作者Simon Micheel