仅在滚动时播放循环 css 动画 - 滚动停止时停止

Question

我在一个固定的 div 上有一个连续播放的 CSS 动画。我想让它只在用户滚动时播放并在滚动停止时停止。我是新手，我一生都无法弄清楚。

我的CSS：

.flame {
margin:0 auto;
position:absolute;
width:100px; 
height:136px;
background:url('../images/flame.png') 0px 0px no-repeat;
-webkit-animation: flicker .4s infinite;

@-webkit-keyframes flicker { /* flame pulses */
0% {
    background-position:0px 0px; 
    opacity:.8 
}
    25% {
        background-position:0px 0px;
}
    25.1% {
        background-position:-100px 0px;        
}
    50% {
        background-position:-100px 0px;
        opacity:.4
}
    50.1% {
        background-position:-200px 0px;
}
    75% {
        background-position:-200px 0px;

}
    75.1% {
        background-position:-100px 0px;
}
    100% {
        background-position:-100px 0px;
        opacity:.8
}

我的 HTML：

<div id="flamegroup">
       <div class="flame" id="fl1"></div>
       <div class="flame" id="fl2"></div>
       <div class="flame" id="fl3"></div> 
</div>

Answer 1

基本上每100ms左右，就需要捕获滚动位置，然后稍等片刻，看看滚动位置有没有变化。如果没有，您可以停止播放动画。示例：

setInterval(function() {
    var tempscroll = $(window).scrollTop();
    setTimeout(function() {
    if (tempscroll == $(window).scrollTop()) {
        $(document.body).removeClass("scrolling");
    } else {
        $(document.body).addClass("scrolling");
    }
    }, 75);

}, 100);

只有当 body 有一个 .scrolling 类时，你的 css 才会应用动画

demo