如何在向下和向上滚动时触发CSS动画

我在一个项目中使用了多个 CSS 动画。我的问题是这些动画在向下滚动时仅触发一次。我需要每次用户滚动它们时触发它们，无论是向上还是向下页面。

CSS

.slideRight{

    animation-name: slideRight;
    -webkit-animation-name: slideRight; 

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 

}

@keyframes slideRight {

    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }               
    100% {
        transform: translateX(0%);
    }   

}

@-webkit-keyframes slideRight {

    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }

}

HTML

<div class="animation-test element-to-hide" style="visibility:visible;">Something</div>

JavaScript

$(window).scroll(function() {

    $('.animation-test').each(function(){

        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();

        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideRight");
        }

    });

});

$('.element-to-hide').css('visibility', 'hidden');

JSFiddle

像这样的东西应该有效。

工作示例

$(window).scroll(function () {
    $('.animation-test').each(function () {
        var imagePos = $(this).offset().top;
        var imageHeight = $(this).height();
        var topOfWindow = $(window).scrollTop();

        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).addClass("slideRight");
        } else {
            $(this).removeClass("slideRight");
        }
    });
});

基本上它只是使用 if 语句来查找元素是否在视口内并添加和删除类。您可以使用以下方法切换元素的可见性：

.element-to-hide{
    visibility:hidden; 
} 
.slideRight {
    visibility: visible;
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out; 
}