A ver si esto le es útil.
Los pasos de la keyframes y los efectos están sin pulir. Sólo para que se haga una idea.
Note que sólo están incluidos los prefijos -webkit-
Código CSS:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; position: relative;}
@-webkit-keyframes cambia_color {
0% {color: #fff; text-shadow: 1px 1px 1px #000; padding-left: 1em}
90% {color: #03f; text-shadow: 1px 1px 1px #fff; padding-left: 9em;}
}
#noticias {
width: 600px;
margin: 10px auto;
font-size: 1em;
}
h2 {
font-size: 1.5em;
text-transform: uppercase;
margin-top: 1.em;
background: red;
-webkit-animation-name: cambia_color;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 10s;
}
</style>
</head>
<body>
<div id="noticias">
<h2>Noticia Primera</h2>
<p>Lorem ipsum dolor sit amet consectetuer pede pretium odio ultrices Phasellus. Sapien felis augue nunc ipsum feugiat et justo ac molestie vitae. Natoque libero convallis aliquam adipiscing interdum pede quam congue Aenean.</p>
<h2>Noticia 2</h2>
<p>Sed condimentum eleifend Aenean justo volutpat Pellentesque montes cursus Vestibulum auctor. Risus dis consequat Quisque montes vestibulum neque orci eu Pellentesque Nulla. Sem lacus nec dolor egestas ut Vestibulum porttitor aliquam quis lacinia. Vitae Ut id Vivamus Vivamus iaculis nisl id urna Quisque ultrices. Tristique amet odio sem sociis quam orci Donec Curabitur condimentum et. Lobortis justo consequat accumsan sed pede nibh eget Donec Sed feugiat. Tortor Nulla orci lacus nibh.</p>
<h2>Noticia 3</h2>
<p>Lorem ipsum dolor sit amet consectetuer pede pretium odio ultrices Phasellus. Sapien felis augue nunc ipsum feugiat et justo ac molestie vitae. Natoque libero convallis aliquam adipiscing interdum pede quam congue Aenean a. Sed condimentum eleifend Aenean justo volutpat Pellentesque montes cursus Vestibulum auctor. Risus dis consequat Quisque montes vestibulum neque orci eu Pellentesque Nulla. Sem lacus nec dolor egestas ut Vestibulum porttitor aliquam quis lacinia. Vitae Ut id Vivamus Vivamus iaculis nisl id urna Quisque ultrices. Tristique amet odio sem sociis quam orci Donec Curabitur condimentum et. Lobortis justo consequat accumsan sed pede nibh eget Donec Sed feugiat. Tortor Nulla orci lacus nibh.</p>
</div>
</body>
</html>