无法在一个周期结束时停止animation
我正在制作一个CSSanimation，在这个animation中，我正在移动东西，并希望它停留在最后位置，直到用户将鼠标移开。
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; } 只要animation结束，它只是重演。 我只希望它发生一次，并保持它的位置，直到用户离开。 我尝试使用规范中的暂停的东西，但它不工作，因为我所期望的。 任何帮助表示赞赏。 谢谢。 🙂
以下评论为我工作。 谢谢迈克尔
“你需要添加填充模式来冻结animation结束时的animation状态。
-webkit-animation-fill-mode: forwards;
forwards在最后一帧的状态下离开animation
backwards离开animation的开始
万一你的animation仍然重置到第一帧，请注意你声明CSS的顺序 ：
这工作正常：
animation: yourAnimationName 1s; animation-fill-mode: forwards;
这不会（重置到第一帧）：
animation-fill-mode: forwards; animation: yourAnimationName 1s;
整蛊！
如果我正确地理解了这个问题，听起来像你需要将迭代设置为'1'。
-webkit-animation-iteration-count: 1;
css3animation重置为animation结尾处的默认样式。 你可以尝试使用javascript：
您可以将一个eventListener添加到您的animation，检索您希望保留的样式，手动应用它们并删除animation。
document.getElementById('yourdiv').addEventListener( 'webkitAnimationEnd', function(){ document.getElementById('yourdiv').style.backgroundPosition = '0px 0px'; document.getElementById('yourdiv').style.webkitAnimationName = 'none'; }, false );
尝试这个：
-webkit-animation-duration: 10s, 10s;
🙂
