通過滾動觸發CSS關鍵幀動畫

Question

說我有一個動畫的元素：

#element { 
    animation: Fade 3s linear 1s forwards; 
} 

@keyframes Fade { 
    /* do stuff */ 
} 

我如何可以觸發這個動畫，只有當用戶向下滾動？ Vanilla JS，jQuery，ScrollMagic，GSAP/TweenMax，然而你想要做到這一點。

添加動畫屬性本身會觸發效果嗎？因此，用戶滾動到某個點/元素，然後我應用類似於：$('#element').css('animation', 'Fade 3s linear 1s forwards');？

Answer 1

當用戶向下滾動時，將一個類添加到其上具有動畫的元素。

僞

on window scroll { 
    if (scroll pos > x) { 
    element.addclass("animateMe"); 
    } 
} 

演示

http://jsbin.com/zuqexigepe/edit?html,output

如果你希望動畫發生每當用戶滾動過去的某一點，你可以簡單地改變滾動事件刪除類像這樣：

$(window).scroll(function() { 
    if($(window).scrollTop() > 0) { 
    element.addClass("animateMe"); 
    } 
    else { 
    element.removeClass("animateMe"); 
    } 
});