CSS3 Marquee

by Leo Wattenberg

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. So wird z. B. aus der Sixtinischen Kapelle im Vatikan, einem vom Katholizismus geprägten, kunstvollen architektonischen Bauwerk, wo es der Natur nach eher keusch zugeht, schnell mal eine Sextinische Kapelle. 
<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 50s linear infinite;
}

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

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