Squarespace无限文字滚动跑马灯动画周期结束重置问题求解

算力阿峰

2026-10-10

跑马灯动画周期重置问题解决方案

问题核心原因

跑马灯动画出现周期重置跳变，核心是@keyframes vertscroll中写死的translateX(-1400px)数值和单个重复文本块（.js-marquee-2）的实际宽度不匹配。动画每轮结束复位到初始位置时，两个重复文本块的衔接出现错位，就会产生明显的重置感。
冗余布局设置：.marquee的width: 100000px属于不必要的超大宽度配置，会增加布局计算偏差的概率。

修复方案

首先通过浏览器开发者工具选中任意一个.js-marquee-2元素，查看「计算样式」中的宽度数值，假设测量得到的宽度为2800px，将CSS代码调整如下，HTML代码无需修改：

[data-section-id="60fa77839ea7dd121dbd947d"] {
  overflow: hidden;
}

body {
  overflow-x: hidden;
}

/* 未用到的vertscroll类可直接删除，保留不影响运行 */
.vertscroll {
  margin: 0 auto;
  white-space: nowrap;
  position: absolute;
  span {
    display: inline-block;
    animation: vertscroll 40s linear infinite;
    &:nth-child(2) {
      animation-delay: 5s;
    }
  }
}

.marquee {
  position: relative;
  z-index: 1;
  /* 移除固定超大宽度，改为由子元素宽度自动撑开 */
  width: max-content;
  transform: translateX(0px);
  animation: 40s linear 0s infinite normal none running vertscroll;
  a {
    font-size: 24px;
    color: #626262;
    transition: all .2s;
    &:hover {
      color: #cfc194;
    }
  }
  .js-marquee-2 {
    float: left;
  }
}

/* 此处-2800px替换为你实际测量得到的单个.js-marquee-2元素宽度 */
@keyframes vertscroll {
  100% {
    transform: translateX(-2800px);
  }
}