僅在滾動時播放循環的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

基本上，每100毫秒左右，您需要捕獲滾動位置，然后稍等一下，看看滾動位置是否已更改。 如果還沒有，則可以停止播放動畫。 例：

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

}, 100);

而且，僅當主體具有.scrolling類時，您的CSS才會應用動畫

演示