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);

	counter-reset:    marqueeindex;
}
/* 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 oberhalb von Container */
	transform: translateY(-100%);
}
/* Jedem Paragraphen richtige Animation zuweisen,
   mit Gesamt-Dauer von 20s für kompletten Durchlauf */
.marquee p {
	animation: shownews 20s ease infinite;
}
/* Counter-Nummer jedes Paragraphen voranstellen. */
.marquee p:before {
	counter-increment: marqueeindex;
	content: counter(marqueeindex) ": ";
}
/* Verzögerungen ab zweitem Element. */
.marquee p:nth-child(2) { animation-delay:  4s; }
.marquee p:nth-child(3) { animation-delay:  8s; }
.marquee p:nth-child(4) { animation-delay: 12s; }
.marquee p:nth-child(5) { animation-delay: 16s; }
/* Gemeinsamer Selektor pausiert in allen Browsern,
   wenn alle Elemente auf die gleiche Animation zugreifen. */
.marquee:hover p {
	animation-play-state: paused;
}

/* Ein Animations-Verlauf für die Anzeige eines Elements. */
@keyframes shownews {
	0%  {
		transform:translateY(-100%);
	}
	5% {
		transform:translateY(0);
	}
	15% {
		transform:translateY(0);
	}
	20% {
		transform:translateY(100%);
	}
	100%{
		transform:translateY(100%);
	}
}

<div class="marquee">
	<p>Brisante News #1</p>
	<p>Brisante News #2</p>
	<p>Brisante News #3</p>
	<p>Brisante News #4</p>
	<p>Brisante News #5</p>
</div>