CSS3 Анимация положения

Рассмотрим анимацию CSS3 с кораблем, движущимся над синим цветом. div. По какой-то причине корабль не движется. HTML-код выглядит следующим образом:

<div id="wrapper">
  <div id="sea">
    <img src="ship.png" alt="ship" width="128" height="128"/>
  </div>
</div>

Чтобы сделать анимацию CSS3, я использую следующее:

#wrapper { position:relative;top:50px;width:700px;height:320px;
          margin:0 auto;background:white;border-radius:10px;}
#sea { position:relative;background:#2875DE;width:700px;height:170px;
       border-radius:10px;top:190px; }
#sea img { 
  position:relative;left:480px;top:-20px;
  animation:myship 10s;
  -moz-animation:myship 10s; /* Firefox */
  -webkit-animation:myship 10s; /* Safari and Chrome */
  @keyframes myship {
    from {left: 480px;} 
    to{left:20px;} 
   }
   @-moz-keyframes myship {
     from {left: 480px;} 
     to {left:20px;} 
   }
   @-webkit-keyframes myship {
     from {left: 480px;} 
     to{left:20px;} 
   }
}

Изображение корабля не движется. Будем признательны за любую помощь.