CSS3アニメーション位置

Question

青いdivの上に移動する船でCSS3アニメーションを検討してください。何らかの理由で船が動いていない。私が使用CSS3アニメーションを作るために

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

以下：

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

船の画像が動いていない、次のようにHTMLです。どんな助けでも大歓迎です。

Answer 1

です。

http://jsfiddle.net/aNvSf/

変更したCSSは次のようになります。

#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

left,top,bottomまたはでアニメートするには、絶対配置された要素または浮動要素が必要です。そう、位置をabsoluteに変更してください。

また、キーフレームを宣言する前に、中括弧}がありました。

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

中括弧エラー：

#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. 

ここでは、CSSセレクタの外にあなたのキーフレームを宣言するだけでなく、絶対位置の要素をアニメーション化する必要が働いてdemo