CSS3 एनीमेशन स्थिति

Question

नीली div के ऊपर जाने वाले जहाज के साथ CSS3 एनीमेशन पर विचार करें। किसी कारण से जहाज हिल नहीं रहा है।

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

आदेश CSS3 के एनीमेशन का उपयोग मैं बनाने के लिए निम्नलिखित:

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

जहाज छवि चलती नहीं है एचटीएमएल इस प्रकार है। कोई भी मदद बहुत ही सराहनीय होगी।

Answer 1

आप सीएसएस चयनकर्ता के बाहर अपने-फ़्रेम घोषित करने के लिए, साथ ही साथ एक बिल्कुल तैनात तत्व चेतन है।

http://jsfiddle.net/aNvSf/

अपने संशोधित सीएसएस इस तरह दिखता है:

#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 या right साथ चेतन करने के लिए, आप या तो एक पूरी तरह से तैनात या जारी तत्व करना होगा। तो, स्थिति को 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. 

यहाँ एक काम कर demo