animation marquee like: animation + attr data-

dabblet.css

/* animation marquee like: animation + attr data- */
 div {text-align:center;}
 p {display:inline-block;margin:3em auto;border:double;background:orange;padding:5px 0;
 position:relative;overflow:hidden;}
 strong {display:block;animation:linear  marqueelike 12s infinite ;margin-left:-100%;padding:0 5px;text-align:left;}
 strong:after {content:attr(data-text);position:absolute;white-space:nowrap;padding-left:10px;color:#555;}
 @keyframes marqueelike {
 0%, 100% {margin-left:0;}
 99.99% {margin-left:-100%;}
 }

dabblet.html

<div>
	<p>
		<strong data-text=" L'ECAM vous souhaite une bonne saison 2013 - Le calendrier 2013 de l'ECAM est en ligne">
			L'ECAM vous souhaite une bonne saison 2013 - Le calendrier 2013 de l'ECAM est en ligne
		</strong>
	</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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