Slider de noticias en CSS3

Cuando queremos darle a nuestro sitio un diseño minimalista para no saturar con información la vista de los visitantes debemos recurrir a diferentes métodos para mostrar la información. Uno de los más usados es colocar un slider o carrusel con diferentes elementos los cuales se van mostrando uno por uno o en conjunto.

Con CSS3 podemos crear un slider de este tipo y sin ninguna línea de código extra. Empecemos con la estructura básica en html:

<div id="news_ticker">
	<span>Últimas noticias</span>
	<div class="clearfix"></div>
	<div id="news">
		<ul>
			<li>
				<a href="#">
					<img src="../images/android_cookie.jpg" width="50" height="auto">
					<span>Título de noticia 1<br><br>Leer más</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../images/android_cookie.jpg" width="50" height="auto">
					<span>Título de noticia 2<br><br>Leer más</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../images/android_cookie.jpg" width="50" height="auto">
					<span>Título de noticia 3<br><br>Leer más</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../images/android_cookie.jpg" width="50" height="auto">
					<span>Título de noticia 4<br><br>Leer más</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../images/android_cookie.jpg" width="50" height="auto">
					<span>Título de noticia 5<br><br>Leer más</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../images/android_cookie.jpg" width="50" height="auto">
					<span>Título de noticia 6<br><br>Leer más</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../images/android_cookie.jpg" width="50" height="auto">
					<span>Título de noticia 7<br><br>Leer más</span>
				</a>
			</li>
		</ul>
	</div>
</div>

Ahora le damos estilo al contenedor principal y al título:

.clearfix{
	clear:both;
	display:block;
	height:0;
	width:0;
}
#news_ticker{
	background:#333;
	border-radius:10px;
	box-shadow:3px 3px 5px rgba(0,0,0,.5);
	color:#eee;
	height:256px;
	margin:20px auto;
	width:200px;
}
#news_ticker > span{
	box-sizing:border-box;
	float:left;
	font-size:14px;
	font-weight:bold;
	padding:10px;
	text-align:center;
	width:100%;
}

A continuación aplicamos estilo al contenedor de las noticias, a la lista y a cada noticia:

#news{
	height:210px;
	overflow:hidden;
}
#news ul{
	animation: ticker 20s ease infinite 2s;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
}
#news ul li{
	float:left;
	height:50px;
	padding:10px 20px;
}
#news ul li a{
	color:#eee;
	text-decoration:none;
}
#news ul li a img{
	float:left;
}
#news ul li a span{
	float:left;
	margin-left:5px;
	width:100px;
}

Por último definimos la animación que le colocamos a la lista, la cual la desplazará dentro de su contenedor:

@keyframes ticker {
	0%   {margin-top: 0;}
	20%  {margin-top: -70px;}
	40%  {margin-top: -140px;}
	60%  {margin-top: -210px;}
	80%  {margin-top: -280px;}
	100%   {margin-top: 0;}
}

Cabe destacar que es necesario colocar los prefijos necesarios para cada navegador o utilizar una solución mucho más sencilla como prefixfree.