每次再次激活时，动画相同的块

Question

我有一个内容轮播的网站。每次选择下一张幻灯片时，带有文本的黄色块都可见，当您离开幻灯片时，该块再次变为不可见。现在我希望每当它变得可见或不可见时（例如淡入或淡出）为该块设置动画。

使用CSS动画和JQuery我似乎无法让它多次运行。特别是因为块已经加载了动画。

网站链接： http://i280133.iris.fhict.nl/jongens/index.php

$('.home .imagewrapper').css({
    'opacity': '0',
    'left': '-50px'
}).animate({
    left: "+=50px",
    opacity: 1
}, 1000, function() {
    $('.home .textwrapper').animate({
        top: "40px",
        opacity: 1
    }, 1000, function() {
        $('.home .swiper-slide-active .textwrapper').animate({
            opacity: 1
        }, 1000, function() {

        });
    });
});

.home .swiper-slide .textwrapper {
    visibility: hidden;
    opacity: 0;
    transition: 0.6s ease-in;
}

.home .swiper-slide-active .textwrapper {
    visibility: visible;
    opacity:1;
}

<div class="swiper-container">
    <div class="swiper-wrapper">

        <div class="swiper-slide een">

            <div class="imagewrapper col-md-10">
                <img src="http://placehold.it/780x450" class="desktop">
                <img src="http://placehold.it/400x500" class="mobile">
            </div>

            <div class="textwrapper col-md-4">
                <h1 class="quote">Die nieuwe outfit was hard nodig.</h1>
            </div>

        </div>

        <div class="swiper-slide twee">
            <div class="imagewrapper col-md-10">
                <img src="http://placehold.it/780x450" class="desktop">
                <img src="http://placehold.it/400x500" class="mobile">
            </div>

            <div class="textwrapper col-md-4">
                <h1 class="quote">Hoe zit dat met uw huisstijl?</h1>
                <br>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                <br>
                <p class="leesmeer">meer</p>
            </div>
        </div>

        <div class="swiper-slide drie">
            <div class="imagewrapper col-md-10">
                <img src="http://placehold.it/780x450" class="desktop">
                <img src="http://placehold.it/400x500" class="mobile">
            </div>

            <div class="textwrapper col-md-4">
                <h1 class="quote">Die nieuwe outfit was hard nodig.</h1>
            </div>

        </div>

        <div class="swiper-slide vier">
            <div class="imagewrapper col-md-10">
                <img src="http://placehold.it/780x450" class="desktop">
                <img src="http://placehold.it/400x500" class="mobile">
            </div>

            <div class="textwrapper col-md-4">
                <h1 class="quote">Die nieuwe outfit was hard nodig.</h1>
            </div>
        </div>

        <div class="swiper-slide vijf">
            <div class="imagewrapper col-md-10">
                <img src="http://placehold.it/780x450" class="desktop">
                <img src="http://placehold.it/400x500" class="mobile">
            </div>

            <div class="textwrapper col-md-4">
                <h1 class="quote">Die nieuwe outfit was hard nodig.</h1>
            </div>
        </div>

    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>