连续水平CSS滚动

Question

我有一个Create-React-app项目，要求我不断在屏幕上滚动一些信息。我当前的实现：

 import React from 'react'
import './styles/animation.css'


const Tickerbar = (props) => {
  const displayNameStyle = {
    color:'white',
  }

  const midStyle = {
    color:'#CDBFBF',
    marginRight:'20px'
  }
  const displayNames = Object.keys(props.tickers)
  const displayNameAndMid = displayNames.map(cusip => {
    return(
        <span key={cusip}>
          <span style={displayNameStyle}>
            <b>{cusip.split('/').join('.')}: </b>
          </span>

          <span style={midStyle}>
            <b>{(props.tickers[cusip]).toFixed(2)}</b>
          </span>
        </span>
  )
  })
  return(
    <div className="marquee">
      <p>
        {displayNameAndMid}
      </p>
    </div>
  )
}
export default Tickerbar;

.marquee {
  width: 100vw;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  height: 51px;
  position: absolute;
  bottom: 10px;
}

.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 100s linear 1s infinite;
    -webkit-animation: marquee 100s linear 1s infinite;
    color:white;
}

@keyframes marquee {
  0%   { transform: translate(-50%, 0); }
  100% { transform: translate(-100%, 0); }
}

@-webkit-keyframes marquee {
    0%   { -webkit-transform: translate(-50%, 0); }
    100% { -webkit-transform: translate(-100%, 0); }

但是，这样做的问题是文本滚动，然后结束时，我可以看到它再次启动。理想情况下，当文本在屏幕左侧结束时，它将在屏幕右侧再次开始滚动。我已经看到了一些实现方式，这些实现方式可以通过两次写入文本，并使第二组文本在动画时间的一半开始滚动，但是当我尝试这样做时，这些字母会彼此重叠并且难以理解。