如何让keyframes动画平滑重启？解决结尾跳转卡顿及元素显示异常

嘿，我太懂你这个烦恼了——动画到结尾直接“弹”回起始状态，不仅突兀，第一个元素还显示不全，确实糟心。咱们来一步步把它改得丝滑起来：

问题根源拆解 #

首先，你的动画跳帧是因为关键帧里80%到100%是直接从-180px跳回0px，完全没有过渡过程；另外，每个<h3>的高度+边距计算不统一，导致位移数值出错，才会让第一个元素显示不全。

第一步：统一元素尺寸，搞定计算基准 #

先给每个<h3>固定高度和边距，确保位移计算精准（毕竟#flip的高度是43px，咱们让每个标题刚好填满这个容器）：

#flip h3 {
  font-weight: 400;
  font-size: 0.5em;
  color: white;
  text-transform: uppercase;
  text-align: right;
  display: inline-block;
  padding: 5px;
  margin-bottom: 10px;
  height: 43px; /* 和#flip高度一致 */
  box-sizing: border-box; /* 让padding不额外占高度 */
  animation: flip 4s infinite;
  animation-delay: 1s;
}

第二步：重写关键帧，实现平滑循环 #

现在每个元素的总占用高度是43px（标题高度） + 10px（下边距）= 53px，咱们基于这个数值调整关键帧，同时给最后一段回滚动画留足过渡时间：

@-webkit-keyframes flip {
  0% { transform: translateY(0); }
  16.66% { transform: translateY(-53px); } /* 切到第二个元素 */
  33.32% { transform: translateY(-106px); } /* 第三个 */
  49.98% { transform: translateY(-159px); } /* 第四个 */
  66.64% { transform: translateY(-212px); } /* 第五个 */
  83.3% { transform: translateY(-212px); } /* 第五个元素停留一会儿 */
  100% { transform: translateY(0); } /* 平滑滑回第一个 */
}

这里把动画分成了三段：逐个切换元素→停留最后一个元素→平滑回滚到第一个，完美解决跳帧问题。

可选优化：让过渡更自然 #

如果想要动画的加速减速更柔和，可以给动画加上缓动函数：

#flip h3 {
  /* 其他样式不变 */
  animation: flip 4s infinite ease-in-out;
  animation-delay: 1s;
}

这样改完之后，动画就会丝滑地循环起来，第一个元素也能完整显示啦～

内容的提问来源于stack exchange，提问作者Matúš Rebroš