参见英文答案 >
Stopping a CSS3 Animation on last frame5个答案我写一个css3动画，它只执行一次。动画效果很好，但是当动画完成时它会重置。如何避免这种情况，我想保留结果而不是重置它。
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("#fdiv").delay(1000).addClass("go");
});
</script>
<style>
#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: 500px;
height: 500px;
margin-left: -250px;
margin-top: -250px;
-webkit-transform: rotateZ(360deg);
}
}
</style>
<div id="fdiv">
</div>
这是demo.Thx！
解决方法@H_502_8@
添加动画填充模式：转发;
到你的.go
The animation’s final keyframe continues to apply after the final iteration of the animation completes.
到你的.go
The animation’s final keyframe continues to apply after the final iteration of the animation completes.
