Цикличная плавная анимация появления и исчезновения блоков

JQuery

function blockAnimate() {
    var slideanim = '.rev--inner .active';
    let active = $(slideanim);
    let next = $(slideanim).next('.bg-inner').length ? $(slideanim).next('.bg-inner') : $('.rev--inner-1 .bg-inner').first();
    $(slideanim).removeClass('active');
    next.addClass('active');
    active.addClass('hiddenclass');
}

Вызвать функцию

<script>
(function(){
    $(document).ready(function() {
        setInterval('blockAnimate();', 2000);
    });
})();
</script>

CSS

.hiddenclass {
    display: none;
    animation: fadeOut ease 0.7s;
    -webkit-animation: fadeOut ease 0.7s;
    -moz-animation: fadeOut ease 0.7s;
    -o-animation: fadeOut ease 0.7s;
    -ms-animation: fadeOut ease 0.7s;
}
.active {
    display: block;
    animation: fadeIn ease 0.7s;
    -webkit-animation: fadeIn ease 0.7s;
    -moz-animation: fadeIn ease 0.7s;
    -o-animation: fadeIn ease 0.7s;
    -ms-animation: fadeIn ease 0.7s;
}

HTML

<div class="miniature">
    <div class="bg-inner active">
        <img src="../img/anim-1.jpg" alt="">
    </div>
    <div class="bg-inner">
        <img src="../img/anim-3.jpg" alt="">
    </div>
    <div class="bg-inner">
        <img src="../img/anim-7.jpg" alt="">
    </div>
    <div class="bg-inner">
        <img src="../img/anim-rev-1.jpg" alt="">
    </div>
    <div class="bg-inner">
        <video loop="" muted="" autoplay="1">
            <source src="../img/anim-8.mp4" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
            <source src="../img/anim-8.mp4" type="video/webm; codecs=&quot;vp8, vorbis&quot;">
        </video>
    </div>
</div>