Question

我正在将这个动画用于ajax加载器：http://codepen.io/hericdk/pen/niweF 现在，当ajax调用完成后，我想将动画gif更改为“复选标记”，然后我希望动画暂停，然后慢慢淡出，以便我这样做：

$('.spinner').css("background-image", "url('/img/complete.png')");
$('.spinner').addClass("animationpaused");
$('.spinner').fadeOut(800);

其中animationpaused css是：

.animationpaused{
  -webkit-animation-play-state:paused !important;
  -moz-animation-play-state:paused !important;
  -o-animation-play-state:paused !important;
  animation-play-state:paused !important;
}

问题有时我可以让“复选标记”图标暂停。如何暂停CSS动画并确保它在原始状态下暂停，以便我的图标永远不会颠倒？

编辑：我添加了小提琴，使其更清晰： http://jsfiddle.net/oL31LwdL/1/基本上点击停止按钮后，我希望动画继续到第1帧，然后停止，这样检查图标将处于原始位置。

Answer 1

您可以添加动画填充模式。在您的情况下，您可能需要：

animation-fill-mode: none;

在此处详细了解：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

如何在原始状态下暂停css动画

1 个答案: