無法在一個循環結束時停止動畫

Question

我在一分鐘內製作一個CSS動畫，並在其中移動東西，並希望它停留在最後位置，直到用戶將鼠標移開。

body { 
    background: url('osx.jpg'); 
    padding: 0; 
    margin: 0; 
    line-height: 60px; 
} 

@-webkit-keyframes item1 { 
    0% { bottom: -120px; left: 0px; } 
    10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); } 
    100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); } 
    } 

@-webkit-keyframes item2 { 
    0% { bottom: -120px; left: 0px; } 
    10% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); } 
    100% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); } 
} 

@-webkit-keyframes item3 { 
    0% { bottom: -120px; left: 0px; } 
    10% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); } 
    100% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); } 
} 

    div { 
    position: relative; 
    } 
#folder { 
    width: 120px; 
    margin: 0px auto; 
} 

#folder > div { 
    position: absolute; 
} 

#folder:hover > div:nth-of-type(1) { 
    -webkit-animation-name: item1; 
    -webkit-animation-duration: 10s; 
} 

#folder:hover > div:nth-of-type(2) { 
    -webkit-animation-name: item2; 
    -webkit-animation-duration: 10s; 
} 

#folder:hover > div:nth-of-type(3) { 
    -webkit-animation-name: item3; 
    -webkit-animation-duration: 10s; 
} 

只要動畫結束，它只是重複自己。我只希望它發生一次，並保持它的位置，直到用戶離開。我嘗試了使用規範中暫停的東西，但它並不像我預期的那樣工作。任何幫助表示讚賞。謝謝。 :)

Answer 1

以下評論適合我。感謝邁克爾

「你需要添加填充模式在動畫的最後凍結動畫狀態。

-webkit-animation-fill-mode: forwards; 

forwards離開動畫的最後一幀的狀態

backwards在開始處留下動畫

Answer 2

試試這個：

-webkit-animation-duration: 10s, 10s; 

:)

Answer 3

的CSS3動畫重置爲默認樣式在動畫的結尾。您可以使用javascript嘗試：

您可以爲動畫添加一個eventListener，檢索想要保留的樣式，手動應用它們並刪除動畫。

document.getElementById('yourdiv').addEventListener(
    'webkitAnimationEnd', 
    function(){ 
     document.getElementById('yourdiv').style.backgroundPosition = '0px 0px'; 
     document.getElementById('yourdiv').style.webkitAnimationName = 'none'; 
    }, 
    false 
); 

Answer 4

如果我正確地理解了這個問題，聽起來好像你需要設置迭代爲'1'。

-webkit-animation-iteration-count: 1; 

Answer 5

爲了防止動畫重置爲第一幀，請注意訂單，其中聲明瞭css：

這是工作的罰款：

animation: yourAnimationName 1s; 
    animation-fill-mode: forwards; 

這不會（復位到第一幀）：

animation-fill-mode: forwards; 
    animation: yourAnimationName 1s; 

整蠱！