Animation effect slide (with jQuery and CSS)

I've used one template from W3 Schools in order to build a theme with Bootstrap for WordPress http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp

One feature is the animation to slide some elements within a div in the webpage as you scroll it, using jQuery. Currently the animation is implemented only from bottom to top, but I'm struggling to implement from right to left and vice versa as well.

Here is the code already working for bottom to top animation:

jQuery(function($) {
    $(window).scroll(function () {
        $(".slideanim-bottom").each(function () {
            var pos = $(this).offset().top;

            var winTop = $(window).scrollTop();
            if (pos < winTop + 600) {
                $(this).addClass("slide");
            }
        });
    });
});

.slideanim {
    visibility: hidden;
}

.slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}

@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

<div class="row slideanim-bottom">

Does anyone know how to implement the same thing for left to right and vice versa as well? I think it is just a matter of adding some code in the js.

Thanks!