停止无限的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。

LESS：

.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当loader-active是没有任何的运气加入animation-iteration-count和animation-play-state玩耍。

谢谢！

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); 
     } 
    } 
    } 
}