CSS3 Animating position - html

Question

Consider CSS3 animation with ship moving above blue div. For some reason the ship isn't moving. The HTML is as follows:
<div id="wrapper">
<div id="sea">
<img src="ship.png" alt="ship" width="128" height="128"/>
</div>
</div>
In order to make CSS3 animation I use the following:
#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;}
}
}
The ship image isn't moving. Any help is greatly appreciated.

Answer 1

you have to declare your keyframe outside the css selector, as well as animate an absolutely positioned element.
http://jsfiddle.net/aNvSf/
your modified css looks like this:
#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:absolute;
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;}
}​

Answer 2

To animate with left, top, bottom or right, you either have to have a absolutely positioned or floated element. SO, Change the position to absolute.
Also, there was as unclosed braces } before you started to declare the keyframes.
#sea img {
position:absolute;
/* ... */
}
Braces Error:
#sea img{
position:absolute; /* absolute */
left:480px;top:-20px;
animation:myship 10s;
-moz-animation:myship 10s; /* Firefox */
-webkit-animation:myship 10s; /* Safari and Chrome */
}
/* ^ You have to close the braces here, before declaring the keyframes.
Here is a working demo