<分区>
<分区>
我写了一个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>这是 demo .
最佳答案
添加animation-fill-mode: forwards;
到你的.go
The animation’s final keyframe continues to apply after the final iteration of the animation completes.
关于css - 完成后如何防止css3动画重置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31184626/