停止无限的CSS3动画并平稳地恢复到初始状态

Question

使用关键帧动画构建CSS3加载器时遇到麻烦。

装载机由4个可上下移动的盒子组成。我遇到的问题是，当动画应该停止时，框会跳到初始位置。我正在寻找的行为是：加载程序将无限动画，直到完成加载为止，此时加载程序应设置动画到初始位置并停止，这有点像具有animation-iteration-count: infinite并更改它animation-iteration-count: 1以停止动画。（顺便说一句不起作用）。

看到这个小提琴来理解我的意思：https : //jsfiddle.net/cazacuvlad/qjmhm4ma/（单击“停止”按钮时，框应设置为初始位置的动画，而不是跳动）

基本设置是：

<div class="loader-wrapper"><span></span><span></span><span></span><span></span></div>

要启动加载程序，我要向中添加一个loader-active包含动画的类loader-wrapper。

减：

.loader-wrapper {
  &.loader-active {
    span {
      .animation-name(loader);
      .animation-duration(1200ms);
      .animation-timing-function(ease-in-out);
      .animation-play-state(running);
      .animation-iteration-count(infinite);

      &:nth-child(1) {
      }
      &:nth-child(2) {
        .animation-delay(300ms);
      }
      &:nth-child(3) {
        .animation-delay(600ms);
      }
      &:nth-child(4) {
        .animation-delay(900ms);
      }
    }
  }
}

我尝试过将动画添加到loader-wrapper类w / o中的跨度中loader-active，animation-iteration-count并animation-play-state在loader-active添加时和添加时没有任何运气的情况下玩耍。

谢谢！

Answer 1

找到了一个非常简单的解决方法。仍然不是纯CSS，它包含一些JS，但是效果很好。

更新的小提琴：https : //jsfiddle.net/cazacuvlad/qjmhm4ma/2/

我要做的是将loader-active类移至每个跨度（而不是包装器），animationiteration在每个跨度上侦听事件，然后停止动画。

$('.loader-wrapper span').on('animationiteration webkitAnimationIteration', function () {
  var $this = $(this);

  $this.removeClass('loader-active');

  $this.off();
});

这基本上会在迭代周期的最后停止动画。

更新的LESS

.loader-wrapper {
  span {
    &.loader-active {
      .animation-name(loader);
      .animation-duration(1200ms);
      .animation-timing-function(ease-in-out);
      .animation-play-state(running);
      .animation-iteration-count(infinite);

      &:nth-child(1) {
      }
      &:nth-child(2) {
        .animation-delay(300ms);
      }
      &:nth-child(3) {
        .animation-delay(600ms);
      }
      &:nth-child(4) {
        .animation-delay(900ms);
      }
    }
  }
}