CSS3 Animasyon pozisyonu

Question

Mavi divun üzerinde hareket eden gemiyle CSS3 animasyonunu düşünün. Bir sebepten dolayı gemi hareket etmiyor. Kullandığım CSS3 animasyon yapmak için

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

aşağıdaki:

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

gemi görüntüsü hareketli değildir şöyle HTML. Herhangi bir yardım büyük beğeni topluyor.

Answer 1

olduğunu.

http://jsfiddle.net/aNvSf/

değiştirilen css şuna benzer:

#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 veya right ile canlandırma yapmak için ya tam olarak konumlandırılmış veya yüzdürülmüş bir öğeniz olmalıdır. SO, konumu absolute olarak değiştirin. Ana kareleri bildirmeye başlamadan önce, kapsanmamış köşebentler } da vardı.

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

Braces Hata: Burada

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

Eğer css seçicinin dışında kareyi beyan yanı sıra kesinlikle konumlandırılmış öğeyi canlandırmak zorunda çalışan bir demo