Posición de animación de CSS3

Question

Considere la animación de CSS3 con la nave moviéndose sobre div azul. Por alguna razón, el barco no se está moviendo. El HTML es el siguiente:

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

Con el fin de hacer que la animación CSS3 utilizo el siguiente:

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

imagen El barco no se mueve. Cualquier ayuda es muy apreciada.

Answer 1

usted tiene que declarar el fotograma clave fuera del selector CSS, así como animar un elemento con posición absoluta.

http://jsfiddle.net/aNvSf/

el CSS modificado se ve así:

#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

Para animar con left, top, bottom o right, tiene que tener un elemento completamente posicionado o flotante. SO, cambie la posición al absolute.

Además, había llaves abiertas } antes de comenzar a declarar los fotogramas clave.

#sea img { 
    position:absolute; 
    /* ... */ 
} 

Los apoyos de 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. 

Aquí es un trabajo demo