Как добавить анимацию появления блоков?

const swiperCASES = new Swiper(".mySwiper", {
  slidesPerView: 2,
  grid: {
    rows: 2,
  },
  spaceBetween: 25,
  loop: false,
  pagination: {
    el: ".cases-slider__pagination",
    clickable: true,
  },
  breakpoints: {
    320: {
      slidesPerView: 2,
      spaceBetween: 10,
      grid: {
        rows: 2,
      },
    },
    992: {
      slidesPerView: 3,
      spaceBetween: 25,
      grid: {
        rows: 2,
      },
    },
  },
  navigation: {
    prevEl: '.cases-slider__prev',
    nextEl: '.cases-slider__next'
  },
})

let swiperSlides = [...swiperCASES.slides];
$(document).on('click', '.case__box', function(e) {
  const filterData = e.target.dataset.filter;
  const check = filterData;

  $('.case__box').removeClass('case__box--active');
  $(this).addClass('case__box--active');

  swiperCASES.removeAllSlides()

  const slides = swiperSlides.filter((item, index) => $(item)[0].dataset.filter == check || filterData == "all")

  swiperCASES.params.grid.rows = slides.length <= swiperCASES.params.slidesPerView ? 1 : 2

  swiperCASES.appendSlide(slides)
  swiperCASES.updateProgress();
  swiperCASES.updateSize();
  swiperCASES.updateSlides();
  swiperCASES.update();
})

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  margin-top: 0px !important;
  margin-bottom: 30px;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  position: static;
}

.swiper-grid-column>.swiper-wrapper {
  flex-direction: row;
}

.case__box {
  margin-bottom: 10px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<!-- Swiper -->

<div class=" case__holder">
  <div class="case__box case__box--active" data-filter="all">All cases</div>
  <div class="case__box" data-filter="internet">Internet promotion</div>
  <div class="case__box" data-filter="development">Website development</div>
  <div class="case__box" data-filter="socials">Promotion in social networks</div>
  <div class="case__box" data-filter="context">contextual advertising</div>
  <div class="case__box" data-filter="video">video services</div>
</div>
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-filter="development">Slide1</div>
    <div class="swiper-slide" data-filter="development">Slide 2</div>
    <div class="swiper-slide" data-filter="context">Slide 3</div>
    <div class="swiper-slide" data-filter="video">Slide 4</div>
    <div class="swiper-slide" data-filter="video">Slide 5</div>
    <div class="swiper-slide" data-filter="development">Slide 6</div>
    <div class="swiper-slide" data-filter="development">Slide 7</div>
    <div class="swiper-slide" data-filter="">Slide 8</div>
    <div class="swiper-slide" data-filter="">Slide 9</div>
    <div class="swiper-slide" data-filter="">Slide 10</div>
  </div>
  <div class="cases-slider__bottom">
    <div class="cases-slider__prev">prev</div>
    <div class="cases-slider__next">next</div>
    <div class="cases-slider__pagination"></div>
  </div>

</div>