CSS3 Vị trí hoạt ảnh

Question

Cân nhắc hoạt ảnh CSS3 với tàu di chuyển trên div màu xanh dương. Vì lý do nào đó con tàu không di chuyển. HTML như sau:

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

Để làm cho hình ảnh động CSS3 tôi sử dụng như sau:

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

hình ảnh Con tàu không di chuyển. Bất kỳ trợ giúp nào cũng được đánh giá rất cao.

Answer 1

bạn phải khai báo keyframe của bạn ngoài selector css, cũng như động một yếu tố hoàn toàn vị trí.

http://jsfiddle.net/aNvSf/

css sửa đổi của bạn trông như thế này:

#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

Để hoạt ảnh với left, top, bottom hoặc right, bạn phải có phần tử được định vị hoàn toàn hoặc nổi. SO, Thay đổi vị trí thành absolute.

Ngoài ra, có các dấu ngoặc không được đính kèm } trước khi bạn bắt đầu khai báo khung hình chính.

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

Niềng răng Lỗi:

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

Đây là một công tác demo