CSS3 Marquee

HTML

<script src="http://leaverou.github.com/prefixfree/prefixfree.js"></script>
<!-- Fork von http://jsfiddle.net/jonathansampson/XxUXD/ -->
<p class="marquee">Der Freud'sche Vertipper (in Anlehnung an den nymphomanischen Psychologen und Religionskritiker Sigmund Freud) ist ein Schreibfehler, der die Bedeutung des geschriebenen Wortes derart ändert, dass es mit einem Mal nicht mehr ganz jugendfrei wird. Oft ist hier der Wunsch Vater des Gedanken. <a href="http://www.stupidedia.org/stupi/Freud%27scher_Vertipper"> weiterlesen → </a>
</p>

CSS

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

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