CSS3 Marquee

by vovkasolovev

HTML

<script src="http://leaverou.github.com/prefixfree/prefixfree.js"></script>
<p class="dev marquee"><span>Время проигрывания анимации надо менять в зависиомости от длинны контента.</span></p>

<p class="dev marquee"><span>Время проигрывания анимации надо менять в зависиомости от длинны контента. Время проигрывания анимации надо менять в зависиомости от длинны контента.Время проигрывания анимации надо менять в зависиомости от длинны контента.Время проигрывания анимации надо менять в зависиомости от длинны контента.Время проигрывания анимации надо менять в зависиомости от длинны контента.</span></p>

CSS

.marquee {
width: 100%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}

.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0%   { transform: translate(0%, 0); }
100% { transform: translate(-100%, 0); }
}

.marquee span:hover {
animation-play-state: paused;
}


/* Dev */
.marquee.dev {border: 1px green solid;}
.marquee.dev span {border: 1px red solid;}