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

【问题标题】：How to prevent css3 animation reset when finished? [duplicate]完成后如何防止css3动画重置？ [复制]
【发布时间】：2013-06-22 05:24:55
【问题描述】：

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

【问题讨论】：

未来的人们，请不要使用这些答案中的任何供应商前缀。如果您的目标浏览器仍然需要这些，请使用自动化工具来放置它们，例如 Autoprefixer。

标签： css css-animations

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

添加animation-fill-mode: forwards;

致您的.go

动画的最终关键帧在动画的最终迭代完成后继续应用。

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

【讨论】：

这对我来说非常有用，谢谢！

【解决方案3】：

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

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

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

【讨论】：