scroll liste infinite, no js

dabblet.css

/* scroll liste infinite, no js  */
html,body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;} 
div {border:solid;overflow:hidden;background: rgba(100,100,100,0.5);}
div ul , div:hover ul:hover {
animation-name:marquee;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-duration:30s;
animation-play-state:paused;}
div ul {
right: 0% ;padding:0 4em;display:block;width :250%;background:white;box-shadow:0 0 5px;position:relative;}
div:hover ul {
animation-name:marquee;
animation-duration:30s;
animation-iteration-count: infinite;
animation-timing-function:linear;
animation-play-state:running;} 
ul li {display:inline-block;margin: 0;padding : 0;} 
@keyframes marquee { 0% {right: 100%;} 100% {right: -100% } }

h1, h2, p , ul {text-align:center;}
ul:before, ul:after {position:absolute;width:4em;background:#c00;text-align:center;color:yellow;}
ul:before {content:'DEBUT';left:0;}
ul:after {content:'FIN';right:0;}

dabblet.html

<div class="mark"><h1>CSS Marquee</h1><p>basique test avec animation CSS , <em>survolez ce div avec votre souris</em></p>
<ul>   
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>   
<li>2 Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>   
<li>3 Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>  
<li>4 Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc</li>
</ul>
</div>
<hr />
<div>
<h2>how to, I ow too , I ow to ... blabla</h2>
<ol>
<li>definir une largeur adapté au conteneur que vous voulez faire glisser</li>
<li>Cette largeur servira de marge pour l'animation , gauche si le document est en direction:ltr, autrement se sera celle de droite</li>
<li>définir une durée adapté au défilement de votre contenu pour qu'il soit lisible</li>
<ol>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}