CSS3動畫，圖片在移動後消失

我嘗試使用CSS3爲圖片製作動畫，它可以工作，但是我的圖片在我的動畫結束時會消失。CSS3動畫，圖片在移動後消失

在這裏，你可以嘗試（點擊圖片在屏幕中間，你可以看到另一張照片誰在Y軸平移，儘量在中間的重新推出另一布頓動畫） http://jsfiddle.net/58CEh/

這裏我CSS3動畫

body 
{ 
    background-image:url("Pictures/background.jpg"); 

    background-image: no-repeat; 
    position: relative; 
} 

#icon 
{ 
     margin-left:35%; 
     margin-top:25%; 
     position: fixed; 

} 

#desk 
{ 
    margin-left:35%; 
    margin-top: 18%; 
    position: fixed; 
} 
#chat 
{ 
    top: -400px; 
    margin-left:50%; 
    position: fixed; 
} 
#outlook 
{ 
    top: -400px; 
    margin-left:50%; 
    position: fixed; 

} 
#outlook2 
{ 
    top: -400px; 
    margin-left:10%; 
    position: fixed; 
} 


:target 
{ 
     -webkit-animation: soBounceBitch 1.6s linear; 

} 

@-webkit-keyframes soBounceBitch { 

    from { -webkit-transform:translateY(1200px); } 
     46% { -webkit-transform:translateY(1110px); } 
    48% { -webkit-transform:translateY(1020px); } 
    50% { -webkit-transform:translateY(1000px); } 
    52% { -webkit-transform:translateY(940px); } 
    60% { -webkit-transform:translateY (900px) ; } 
    64% { -webkit-transform:translateY (880px) ; } 
    70% { -webkit-transform:translateY (840px) ; } 
    74% { -webkit-transform:translateY (790px) ; } 
    80% { -webkit-transform:translateY (760px) ; } 
    100% { -webkit-transform:translateY (760px) ; } 
    to { -webkit-transform:translateY( 700px ); }

正如你可以看到我沒有隱瞞任何事情......

來源

2014-03-30 xif

你的小提琴不顯示圖像。另外，請確保爲CSS 3動畫添加其他瀏覽器前綴以使其跨瀏覽器。 – JohanVdR

http://css-tricks.com/how-to-deal-with-vendor-prefixes/ – JohanVdR

這是一個測試，爲什麼我只使用webkit，但感謝您的鏈接！ – xif

他們沒有消失，他們只是恢復到原來的位置在動畫完成後。

爲了解決這個問題，你需要設置（在你的CSS中）元素的位置到你希望它們結束的位置。

請參閱this線程。

來源

2014-03-30 16:08:48

CSS3動畫，圖片在移動後消失

回答

相關問題