html动画如何设置恢复原状态,javascript – 停止无限的CSS3动画并顺利恢复到初始状态...

使用关键帧动画构建

CSS3加载器时遇到一些麻烦.

装载机由4个盒子组成,可以上下移动.我遇到的问题是,当动画停止时,框会跳到初始位置.我正在寻找的行为是：加载器无限制地动画直到加载完成,此时它应该动画到初始位置并停止,有点像动画迭代计数：无限并将其更改为动画迭代 – 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而没有任何运气的情况下使用动画迭代计数和动画播放状态.

谢谢！