CSS3 Animating position

animation, css, html

Solution

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;} 
}​

Problem

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.

Original source