Tailwind+Next.js跑马灯动画问题：内容无法连续滚动存在延迟

你当前实现的跑马灯在滚动到内容末尾后，会出现较长停顿才继续滚动，核心原因是仅渲染了一轮内容，且动画缺少无缝循环的逻辑。以下是具体修复方案：

核心修复步骤 #

• 1. 定义正确的滚动关键帧动画
• 2. 复制内容实现无缝衔接
• 3. 调整容器布局隐藏超出内容

修改后的自定义CSS（放入globals.css） #

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 滚动一半宽度，适配复制后的内容长度 */
  }
}

.animate-marquee {
  animation: marquee 20s linear infinite; /* 可根据内容总长度调整动画时长 */
}

修改后的组件代码 #

import { useRouter } from "next/router";
import pathChecking from "../../utils/pathChecking";
import Image from "next/image";

const testimonial_data = [
  {
    desc: "Inform, inspire, connect, and collaborate for meaningful action.",
    id: "0General Partner at Entrepreneur",
  },
  {
    desc: "Addressing the world’s biggest environmental and social challenges.",
    id: "1General Partner at Entrepreneur",
  },
  {
    desc: "Fun, interactive, and immersive technology for real-world positive outcomes. ",
    id: "2General Partner at Entrepreneur",
  },
];

// 复制一份内容，让滚动到末尾时无缝衔接
const seamlessTestimonials = [...testimonial_data, ...testimonial_data];

const HeroSliderComponent = () => {
  const route = useRouter();

  return (
    <>
      {/* 父容器：隐藏超出视口的内容 */}
      <div className="overflow-hidden w-full">
        {/* 内容容器：强制横向排列不换行 */}
        <div className="flex animate-marquee space-x-8 flex-nowrap">
          {seamlessTestimonials.map((item, index) => {
            // 生成唯一key，避免重复ID导致React渲染警告
            const uniqueKey = `${item.id}-${index}`;
            const { desc } = item;
            return (
              <div className="text-white" key={uniqueKey}>
                <div
                  className={`relative rounded-2.5xl border border-jacarta-100 bg-white p-12 transition-shadow hover:shadow-xl dark:border-jacarta-700 dark:bg-jacarta-700`}
                >
                  <p className="block font-display text-xl font-medium group-hover:text-accent dark:text-white text-center">
                    {desc}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};

export default HeroSliderComponent;

关键逻辑说明 #

• translateX(-50%)：因为内容被复制了一份，总宽度是原内容的2倍，滚动一半距离后，第二组内容刚好衔接第一组的起点，实现无停顿循环。
• 动画时长调整：把原10s改为20s（可根据内容总长度自行调整），确保滚动速度均匀自然。
• 唯一key处理：复制内容后原ID重复，用index + 原ID生成唯一标识，避免React渲染警告。
• 父容器overflow-hidden：确保超出视口的内容被隐藏，只显示当前滚动的可见区域。

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