完成后如何防止css3动画重置？ [重复]

This question already has an answer here:

这个问题在这里已有答案：

• Stopping a CSS3 Animation on last frame 8 answers
• 停止最后一帧8的CSS3动画答案

I write a css3 animation and it is only performed once. The animation works well, but it will reset when the animation finished. How can I avoid this, I want to keep the result instead of reset it.

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

Here is the demo.

这是演示。

3 个解决方案

#1

Add animation-fill-mode: forwards;

添加动画填充模式：转发;

to your .go

你的.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

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

#2

Add the following style to your stylesheet:

将以下样式添加到样式表：

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

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

#3

Add animation-fill-mode: forwards;

添加动画填充模式：转发;

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