如何防止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> 

这是演示 。

Answer 1

添加animation-fill-mode: forwards;

到你的.go

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

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

Answer 2

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

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

Answer 3

添加animation填充模式：转发;

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