使用ReactJS和CSS连续循环动画滚动

Question

我必须使用React和CSS创建一个连续循环动画滚动，目标是创建一个自动滚动和连续循环列表，所以在列表的最后一个元素之后我应该有第一个元素等等，这就是什么我现在有：

我现在遇到的问题是，当最后一个元素滚动时，我得到一个空白页，应该等待 3 或 4 秒，然后一次又一次循环，并且我想在第 5 项之后获取第 1 项，依此类推。不确定它是否是清楚，这是我目前的代码：

import { useRef, useEffect, useState } from "react";
import Card from "./Card.js";

import "./styles.css";

let data = [
  {
    Name: "1"
  },
  {
    Name: "2"
  },

  {
    Name: "3"
  },

  {
    Name: "4"
  },

  {
    Name: "5"
  }
];

export default function App() {
  const ref = useRef(null);
  const [containerWidth, setWidth] = useState(100 + "%");
  const [animationState, setPlay] = useState("paused");
  useEffect(() => {
    if (ref.current) {
      setWidth(ref.current.scrollWidth + "px");
      setPlay("running");
    }
  }, []);
  console.log(containerWidth);
  const renderCards = data.map((el, index) => {
    return <Card key={index} cardName={el.Name} />;
  });

  return (
    <div className="App">
      <div
        className="d-flex"
        ref={ref}
        style={{
          width: `${containerWidth}`,
          animationPlayState: animationState
        }}
      >
        {renderCards}
      </div>
    </div>
  );
}

.App {
  overflow: hidden;
}
.card {
  width: 200px !important;
  height: 200px;
  background: #ffefef;
  box-shadow: 0px 1px 4px 1px rgba(158, 151, 151, 0.25);
  border-radius: 15px;
  margin: 12px;
  padding: 12px;
}
.d-flex {
  transform: translateY(calc(100vw));
  overflow: visible;
  animation: animateContainer 5s linear forwards infinite;
}
@keyframes animateContainer {
  from {
    transform: translateY(calc(100vw));
  }
  to {
    transform: translateY(calc(-100%));
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这是我的沙箱项目