无法在一个周期结束时停止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; 

🙂