CSS 不能在一个循环结束时停止动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3087360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't stop animation at end of one cycle
提问by Johnny
I'm making a CSS animation at the minute, and in it I'm moving stuff and want it to stay at the end position until the user moves their mouse away.
我正在制作一个 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;
}
Whenever the animation ends though, it just repeats itself. I only want it to happen once and stay where it is until the user moves away. I tried using the paused thing from the spec but it doesn't work as I'd expect it to. Any help is appreciated. Thanks. :)
每当动画结束时，它只会重复自己。我只希望它发生一次并保持原样直到用户离开。我尝试使用规范中的暂停内容，但它并没有像我期望的那样工作。任何帮助表示赞赏。谢谢。:)
回答by iancrowther
The following comment worked for me. Thanks michael
以下评论对我有用。谢谢迈克尔
"You need to add the fill-mode to freeze the animation state at the end of the animation.
“您需要添加填充模式以在动画结束时冻结动画状态。
-webkit-animation-fill-mode: forwards;
forwardsleaves the animation in the state of the last frame
forwards将动画留在最后一帧的状态
backwardsleaves the animation at the start
backwards在开始时离开动画
回答by Mr_Pouet
Just in case your animation still resets to the first frame, be careful with the orderin which you declare the css:
以防万一您的动画仍然重置为第一帧，请注意声明 css的顺序：
This is working fine:
这工作正常：
animation: yourAnimationName 1s;
animation-fill-mode: forwards;
This won't (reset to first frame):
这不会（重置为第一帧）：
animation-fill-mode: forwards;
animation: yourAnimationName 1s;
Tricky!
棘手！
回答by word5150
If I understand the question correctly, it sounds like you need to set the iteration to '1'.
如果我正确理解了这个问题，听起来您需要将迭代设置为“1”。
-webkit-animation-iteration-count: 1;
回答by Stef
The css3 animations reset to the default style at the end of the animation. You can try something with javascript:
css3 动画在动画结束时重置为默认样式。您可以尝试使用 javascript：
You can add an eventListener to your animation, retrieve the styles you wish to keep, apply them manually and remove the animation.
您可以将 eventListener 添加到您的动画中，检索您希望保留的样式，手动应用它们并删除动画。
document.getElementById('yourdiv').addEventListener(
'webkitAnimationEnd',
function(){
document.getElementById('yourdiv').style.backgroundPosition = '0px 0px';
document.getElementById('yourdiv').style.webkitAnimationName = 'none';
},
false
);
回答by Carlos Martins
try this:
尝试这个：
-webkit-animation-duration: 10s, 10s;
:)
:)
