Untitled

dabblet.css

html {background-image:linear-gradient(45deg , blue, green);min-height:100%;}
.marquee {border:solid;white-space:nowrap;overflow:hidden;background-color:rgba(0,0,0,0.5);border-radius: 2em/5em;background-image:linear-gradient(rgba(0,0,0,0.25), rgba(255,255,255,0.25) )}
.marquee > * {position:relative; left:100%;animation : marquee infinite 20s linear;display:inline-block;color:#fff;text-shadow:0 0 1px white;vertical-align:middle; text-decoration: blink ; font-family:courier;font-size:20px;opacity:1;}
.marquee > * > * {display:inline-block;}
.marquee:hover  > * {animation-play-state:paused;} 
@keyframes marquee {
0%   {left:100%;opacity:1;}
5%,15%,25%,45%,55%,65%,75%,85%,95% {opacity:0;}
10%,20%,30%,40%,50%,60%,70%,80%,90% {opacity:1;}
35%  {left:0;opacity:1;}
100% {left:-2500px;opacity:1;}
}

dabblet.html

<div class="marquee">
	<h1>Un basique Marquee avec animation CSS</h1>
	<ul>
	   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	   <li>Aliquam tincidunt mauris eu risus.</li>
	   <li>Vestibulum auctor dapibus neque.</li>
	</ul>
	<p>et paf le chien, c'est trop trôll.</p>
</div>
	

settings.json

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