如何防止css3animation重置完成后?

我写了一个css3animation,它只执行一次。 animation效果很好,但animation完成后会重置。 我怎样才能避免这一点,我想保持结果,而不是重置它。

$(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> 

这是演示 。

添加animation-fill-mode: forwards;

到你的.go

animation的最终关键帧在animation的最后一次迭代完成后继续应用。

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

将以下样式添加到您的样式表中:

 .go { /* Already exists */ -webkit-animation: spinAndZoom 1s 1; /*New content */ -webkit-animation-fill-mode: forwards; } 

添加animation填充模式:转发;

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