CSS 完成后如何防止css3动画重置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17296919/
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
How to prevent css3 animation reset when finished?
提问by SPG
I write a css3 animation and it is only performed once. The animation works well, but it will reset when the animation finished. How can I avoid this, I want to keep the result instead of reset it.
我写了一个 css3 动画，它只执行一次。动画效果很好，但是当动画完成时它会重置。我该如何避免这种情况，我想保留结果而不是重置它。
$(function() {
$("#fdiv").delay(1000).addClass("go");
});#fdiv {
width: 10px;
height: 10px;
position: absolute;
margin-left: -5px;
margin-top: -5px;
left: 50%;
top: 50%;
background-color: red;
}
.go {
-webkit-animation: spinAndZoom 1s 1;
}
@-webkit-keyframes spinAndZoom {
0% {
width: 10px;
height: 10px;
margin-left: -5px;
margin-top: -5px;
-webkit-transform: rotateZ(0deg);
}
100% {
width: 400px;
height: 400px;
margin-left: -200px;
margin-top: -200px;
-webkit-transform: rotateZ(360deg);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="fdiv"></div>Here is the demo.
这是演示。
回答by Eric Hotinger
Add animation-fill-mode: forwards;
添加 animation-fill-mode: forwards;
to your .go
给你的 .go
The animation's final keyframe continues to apply after the final iteration of the animation completes.
在动画的最终迭代完成后，动画的最终关键帧将继续应用。
回答by maqjav
Add the following style to your stylesheet:
将以下样式添加到您的样式表中：
.go {
/* Already exists */
-webkit-animation: spinAndZoom 1s 1;
/*New content */
-webkit-animation-fill-mode: forwards;
}
回答by ShibinRagh
Add animation-fill-mode: forwards;
添加动画填充模式：转发；
.go {
-webkit-animation-fill-mode: forwards;
}
