Непрерывная горизонтальная прокрутка 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); }

Однако проблема заключается в том, что текст прокручивается, затем, когда он заканчивается, я вижу, что он снова запускается.В идеале, когда текст заканчивается в левой части экрана, он снова начнет прокручиваться в правой части экрана.Я видел несколько реализаций, которые работают, когда дважды пишут текст, а второй набор текста начинает прокручиваться в середине времени анимации, но когда я пытаюсь это сделать, буквы оказываются друг над другом и не читаются.