无法在一个循环结束时停止动画

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; 

整蛊！