CSS Animation无限循环出现跳转，如何实现无卡顿平滑滚动？

你的问题出在动画结束后瞬间重置到初始位置，导致跳转。要实现无断点的无限滚动，核心是让滚动内容在视觉上能无缝衔接，下面是具体修改方案：

步骤1：复制滚动内容 #

在#workContainerScroll里再复制一份所有的<li>元素，这样滚动容器里就有两组完全相同的内容，当第一组滚出视野时，第二组刚好接上，视觉上形成无限循环。

修改后的HTML：

<div id="workContainer">
  <ul id="workContainerScroll">
    <!-- 第一组内容 -->
    <li><img src="assets/images/showcase/iPhoneShowcase1.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase2.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase3.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase4.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase5.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase6.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase7.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase8.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase9.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase10.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase11.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase12.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase13.png" /></li>
    <!-- 复制的第二组内容 -->
    <li><img src="assets/images/showcase/iPhoneShowcase1.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase2.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase3.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase4.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase5.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase6.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase7.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase8.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase9.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase10.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase11.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase12.png" /></li>
    <li><img src="assets/images/showcase/iPhoneShowcase13.png" /></li>
  </ul>
</div>

步骤2：调整CSS动画参数 #

把动画的结束位置改成-100%，这样滚动容器会完整滚动过第一组内容的宽度，此时第二组内容刚好完全进入视野，动画重复时就不会有跳转感。同时优化布局样式，去掉冲突属性：

修改后的CSS：

#workContainer {
  height: 500px;
  position: relative;
  width: 100vw;
  overflow: hidden;
  z-index: 1;
  margin: 0;
  padding: 0;
}

#workContainerScroll {
  height: 100%;
  white-space: nowrap;
  animation: scrollText 10s infinite linear;
  margin: 0;
  padding: 0;
  font-size: 0;
  display: flex;
  gap: 15px; /* 用gap替代margin-left，适配flex布局更稳定 */
  align-items: flex-start;
  margin-top: 20px;
}

#workContainerScroll li {
  list-style-type: none;
  display: inline-block;
  margin: 0;
  padding: 0;
}

#workContainer li img {
  width: 200px;
}

@keyframes scrollText {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%); /* 滚动距离改为单组内容的宽度 */
  }
}

关键说明 #

• 复制内容是为了消除滚动末尾的空白断层，让第二组内容刚好衔接第一组的位置。
• 动画滚动距离设为-100%，对应单组内容的总宽度，动画循环时视觉上完全连贯，不会出现跳转。
• 用gap替代margin-left，避免flex布局下的外边距叠加问题，布局更稳定。

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