html - 从右到左无限滚动css，React

Question

.marquee {
    height: 100%;
    width:100%;
    overflow: hidden;
    position: relative;
}

.marqueeContentContainer {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: space-evenly;
    height: 100%;
    -moz-animation: scroll-left 20s linear infinite;
    -webkit-animation: scroll-left 20s linear infinite;
    animation: scroll-left 20s linear infinite;
}

.marqueeContentContainer2 {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: space-evenly;
    height: 100%;
    -moz-animation: scroll-left 20s linear infinite;
    -webkit-animation: scroll-left 20s linear infinite;
    animation: scroll-left 20s linear infinite;
    animation-delay: 10s;
}

@keyframes scroll-left {
    0% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}

<div class='marquee'>
  <div class='marqueeContentContainer'>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
  </div>
  <div class='marqueeContentContainer2'>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
  </div>
</div>

我正在尝试为股票提要创建一个无限滚动，但无法将它们并排放置。这是我目前拥有的，它的代码。

所以你可以看到两个容器是如何在彼此下方的，但在时间方面是正确的

标签： htmlcssreactjsscrollnavbar