marguee.jsを使わずCSSで文字を動かす

HTML

<div class="video">
      <div class="narrate">
        <p class="ticker" data-duplicated='false'>The Boston Celtics have signed center Robert Williams III to a contract extension, the team announced today. </p>
      </div>
    </div>

CSS

html {
	height: 100%;
}
body {
	height: 100%;	
}
.video {
	height: 100%;
	background: url(../img/nba.jpg) no-repeat;
	background-size: 80% auto;
	background-position: center;

}
.narrate {
	position: absolute;
	bottom: 10px;	
	overflow:hidden;
}
p {
	display: inline-block;
  	color: #ffffff;
  	font-size: 36pt;
  	letter-spacing: 4px;
  	text-shadow: 
       2px  2px 0px #003366,
      -2px  2px 0px #003366,
       2px -2px 0px #003366,
      -2px -2px 0px #003366,
       2px  0px 0px #003366,
       0px  2px 0px #003366,
      -2px  0px 0px #003366,
       0px -2px 0px #003366; 
	font-size: 15px;
	animation: flowing 15s linear 1;  
	transform:translateX(100%);  
}

@keyframes flowing {
100% {
transform:translateX(-100%); 
}

jQueryのmarquee.jsを使う場合

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <script src="js/marquee.js"></script>
    <script>
       $(function(){
         var $mq = $('p.ticker').marquee();

       });
    </script>

これでもmarqueeの動きはするが、margueeの文字がループ処理されるので、結局CSSを採用することに。
.bind(‘finished’, function(){} と $*.marquee(‘destroy’);で色々書いてみたんだが、どうやってもループになってしまう。

うーん　難しいね