CSS3 Marquee

by Justin

HTML

<script src="http://leaverou.github.com/prefixfree/prefixfree.js"></script>
<p class="marquee">Latest blog here.</p>

CSS

/* Make it a marquee */
.marquee {
    width: 450px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
}

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

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}