参见英文答案 >
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！
解决方法
添加动画填充模式：转发;
到你的.go
The animation’s final keyframe continues to apply after the final iteration of the animation completes.
