как создать непрерывную бегущую строку?

<marquee direction="right" scrollamount="10">Бегущая строка</marquee>

* { 
  padding: 0; 
  margin: 0; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
} 
 
.b-marquee { 
  font-family: 'Segoe UI', sans-serif; 
  white-space: nowrap; 
  overflow: hidden; 
  background: #333; 
  color: #fff; 
  padding: 10px; 
  position: relative; 
  margin-bottom: 10px; 
} 
 
.b-marquee__text { 
  -webkit-animation: animMarquee 5s linear infinite; 
  animation: animMarquee 5s linear infinite; 
} 
 
@-webkit-keyframes animMarquee { 
  0% { 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
  } 
  100% { 
    -webkit-transform: translateX(100%); 
    transform: translateX(100%); 
  } 
} 
 
@keyframes animMarquee { 
  0% { 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
  } 
  100% { 
    -webkit-transform: translateX(100%); 
    transform: translateX(100%); 
  } 
} 
 
 
/* text right to left*/ 
 
.b-marquee--rtl {} 
 
.b-marquee--rtl .b-marquee__text { 
  -webkit-animation: animMarqueeRtl 5s linear infinite; 
  animation: animMarqueeRtl 5s linear infinite; 
} 
 
@-webkit-keyframes animMarqueeRtl { 
  0% { 
    -webkit-transform: translateX(100%); 
    transform: translateX(100%); 
  } 
  100% { 
    -webkit-transform: translateX(0%); 
    transform: translateX(0%); 
  } 
} 
 
@keyframes animMarqueeRtl { 
  0% { 
    -webkit-transform: translateX(100%); 
    transform: translateX(100%); 
  } 
  100% { 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
  } 
}

<div class="b-marquee"> 
  <div class="b-marquee__text">Text left to right</div> 
</div> 
<div class="b-marquee b-marquee--rtl"> 
  <div class="b-marquee__text">Text right to left</div> 
</div>

$(function() { 
  $('.marquee').marquee({ 
    duration: 7000, 
    startVisible: true, 
    duplicated: true 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script> 
 
<div class='marquee'>jQuery plugin to scroll the text like the old traditional marquee. A 5.51 KB (minified) jQuery plugin to scroll the text like the old traditional marquee.</div>

var wrapper = document.querySelector('.marquee-wrapper'), 
    marquee = document.querySelector('.marquee'),    
    wrapperWidth = wrapper.offsetWidth, 
    marqueeWidth = marquee.scrollWidth; 
     
document.querySelector('button').onclick = function() { 
  clearInterval(interval) 
} 
     
function move() { 
  var currentTX = getComputedStyle(marquee).transform.split(','); 
  if( currentTX[4] === undefined ) { 
    currentTX = -1; 
  } else { 
    currentTX = parseFloat(currentTX[4]) - 1; 
  } 
   
  if(-currentTX >= marqueeWidth) { 
    marquee.style.transform = 'translateX(' + wrapperWidth + 'px)'; 
   
  } else { 
    marquee.style.transform = 'translateX(' + currentTX + 'px)'; 
  } 
} 
 
var interval = setInterval(move, 40);

.marquee-wrapper { 
  width: 300px; 
  overflow: hidden; 
  position: relative; 
} 
 
.marquee-wrapper:after { 
  position: absolute; 
  content: ' '; 
  right: 0; 
  top: 0; 
  width: 50px; 
  height: 100%; 
  background-image: linear-gradient(to right, transparent, #fff); 
} 
 
.marquee { 
  white-space: nowrap; 
}

<div class=marquee-wrapper> 
  <p class=marquee>это бегущая строка, которая реализована при помощи яваскрипта, хотя можно было бы и без него</p> 
</div> 
 
<button>stop</button>