参见英文答案 >
Stopping a CSS3 Animation on last frame5个答案我在分钟做一个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;
}
每当动画结束，它只是重复自己。我只想让它发生一次，留在它的地方，直到用户离开。我尝试使用暂停的东西从规格，但它不工作，我期望它。任何帮助是赞赏。谢谢。
