css3 动画还原,停止无限的CSS3动画并顺利恢复到初始状态(Stop infinite CSS3 animation and smoothly revert to initial state)...

停止无限的CSS3动画并顺利恢复到初始状态(Stop infinite CSS3 animation and smoothly revert to initial state)

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

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

看到这个小提琴，看看我的意思： https ： //jsfiddle.net/cazacuvlad/qjmhm4ma/ (当点击停止按钮时，框应该动画到初始位置，而不是跳跃)

基本设置是：

为了启动加载器，我将一个包含动画的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类中的sp / o loader-active并且在添加了loader-active而没有任何运气时使用animation-iteration-count和animation-play-state 。

谢谢！

Having some trouble building a CSS3 loader using keyframe animations.

The loader consists of 4 boxes that animate going up and down. The issue I'm having is that when the animation is supposed to stop, the boxes jump to the initia