Edit in JSFiddle

html, body {
	background: url('http://subtlepatterns.com/patterns/skewed_print.png');
}

/* Container für Marquee-Inhalte */
.marquee {
	width:            500px;
	height:            50px;
	margin:            25px auto;
	overflow:         hidden;
	position:         relative;

	border:           1px solid #000;
	border-radius:    5px;
	background-color: #222;
	box-shadow:       inset 0px 2px 2px rgba(0, 0, 0, .5),
							0px 1px 0px rgba(250, 250, 250, .2);
}
/* Standard-Style für alle Paragraphen */
.marquee p {
	position:         absolute;
	width:            100%;
	height:           100%;
	margin:           0;
	color:            #fff;
	text-align:       center;
	font-family:      Tahoma, Arial, sans-serif;
	text-shadow:      1px 1px 0px #000000;
	filter:           dropshadow(color=#000000, offx=1, offy=1);

	line-height:      50px; /* Höhe des äußeren Containers */
	/* Alle Paragraph-Startpositionen rechts von Container */
	transform: translateX(100%);
}
/* Jedem Paragraphen richtige Animation zuweisen,
   mit Gesamt-Dauer von 20s für kompletten Durchlauf */
.marquee p:nth-child(1) {
	animation: paragraph-one 20s ease infinite;
}
.marquee p:nth-child(2) {
	animation: paragraph-two 20s ease infinite;
}
/* Ein gemeinsamer Selektor ".marquee:hover p" pausiert nur in IE,
   bei Firefox und Chrome ist dazu ein Selektor pro Element nötig. */
.marquee:hover p:nth-child(1)  {
	animation-play-state: paused;
}
.marquee:hover p:nth-child(2) {
	animation-play-state: paused;
}

/* Animations-Verlauf gemäß Ablauf-Grafik für beide Paragraphen:
   http://media02.hongkiat.com/marquee-css3-animation//advanced-marquee-keyframes.jpg */
@keyframes paragraph-one {
	0%  {
		transform: translateX(100%);
	}
	10% {
		transform: translateX(0);
	}
	40% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(-100%);
	}
	100%{
		transform: translateX(-100%);
	}
}
@keyframes paragraph-two {
	0%  {
		transform: translateX(100%);
	}
	50% {
		transform: translateX(100%);
	}
	60% {
		transform: translateX(0);
	}
	90% {
		transform: translateX(0);
	}
	100%{
		transform: translateX(-100%);
	}
}

<div class="marquee">
	<p>How to add WordPress Related Posts Without Plugins</p>
	<p>Automate Your <a href="http://www.hongkiat.com/blog/out/dropbox" target="_blank" rel="nofollow">Dropbox</a> Files With Actions</p>
</div>