CSS News Ticker

i.html

<div id="ticker"> 
    <p><a href="#">Latest News</a></p> 
        <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>

s.css

body {
    background: #f0f0f0 url(http://noisepng.com/100-90-5-monochrome.png) 0 0 repeat;
    color: #222;
    font: 14px/20px sans-serif;
    padding: 5%;
}
#ticker {
    background: #f6f6f6;
    border: 1px solid #c6c6c6;
    height: 20px;
    margin: 0 auto;
    min-width: 300px;
    overflow: hidden;
    padding: 5px 10px 5px 10px;
    width: 90%;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
} 
p {
    border-right: 1px solid #b6b6b6;
    float: left;
    font-weight: bold;
    padding-right: 10px;
}
a {
    color: #444;
    text-decoration: none;
}
ul {
    float: left;
    margin: 0;
    padding: 0 0 0 10px;
    -webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
       -moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
            animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;    
}
li {
    line-height: 20px;
    margin: 0 0 10px 0;
    padding: 0;
}

/* Animation */

@-webkit-keyframes ticker {
    0%   {margin-top: -5;}
    25%  {margin-top: -30px;}
    50%  {margin-top: -60px;}
    75%  {margin-top: -91px;}
    100% {margin-top: -5;}
}
@-moz-keyframes ticker {
    0%   {margin-top: -5;}
    25%  {margin-top: -30px;}
    50%  {margin-top: -60px;}
    75%  {margin-top: -91px;}
    100% {margin-top: -5;}
}
@keyframes ticker {
    0%   {margin-top: -5;}
    25%  {margin-top: -30px;}
    50%  {margin-top: -60px;}
    75%  {margin-top: -91px;}
    100% {margin-top: -5;}
}

src http://jsfiddle.net/sl1dr/UaAWU/14/

Is there a way to move text horrizontally?