Ticker ohne JS

Original: http://jsfiddle.net/csswizardry/eLpQ3/

HTML

<div id="news-ticker">
        
    <h1>Latest News</h1>
        <ul>
            <li><a href="#">iPhone 5</a></li>
            <li><a href="#">iPad 3</a></li>
            <li><a href="#">MacBook Air</a></li>

            <li><a href="#">MacBook Pro</a></li>
        </ul>
        
</div>

CSS

html{
    font:1em/1.5 "Helvetica Neue", Arial, sans-serif;
}
#news-ticker{
    line-height:30px; /* This is our magic number, pass it down to the children... */
    height:30px; /* Clip the ticker at our magic number */
    overflow:hidden;
    width:96%;
    padding:0 2%;
    background:#ccc;
}
#news-ticker h1,
#news-ticker ul{
    float:left;
}
#news-ticker h1{
    margin-right:5px;
}
#news-ticker ul{
    -webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0);
    -webkit-animation-iteration-count: infinite;
    -moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0);
    -moz-animation-iteration-count: infinite;
}
@-webkit-keyframes ticker {
    0%   {margin-top: 0;}
    25%  {margin-top: -30px;}
    50%  {margin-top: -60px;}
    75%  {margin-top: -90px;}
    100% {margin-top: 0;}
}
@-moz-keyframes ticker {
    0%   {margin-top: 0;}
    25%  {margin-top: -30px;}
    50%  {margin-top: -60px;}
    75%  {margin-top: -90px;}
    100% {margin-top: 0;}
}