How to Trigger css animation both on scrolling down and up

I'm using several CSS animations on a project. My problem is these animations get triggered only once, when scrolling down. I need them to be triggered every time the user scrolls by them, whether going up or down the page.

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