如何防止 css3动画复位时完成？

我写了一个 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>

这是小样。

62623 次浏览

小开

最佳答案

Add animation-fill-mode: forwards;

to your .go

The animation’s final keyframe continues to apply after the final iteration of the animation completes.

http://css-infos.net/property/-webkit-animation-fill-mode

小开

Add the following style to your stylesheet:

.go {
/* Already exists */
-webkit-animation: spinAndZoom 1s 1;


/*New content */
-webkit-animation-fill-mode: forwards;
}

小开

Add animation-fill-mode: forwards;

.go {
-webkit-animation-fill-mode: forwards;
}