Как добавить эффект увеличения в загрузочную карусель

Question

Я пытаюсь добавить эффект масштабирования к карусели начальной загрузки, но я просто не могу заставить его срабатывать: (

Я полагаю, что мне, возможно, придется добавить синтаксис к ядру _carousel.файл scss (или, возможно, нет?). Итак, помня об этом, я попытался добавить обычный файл CSS, а также файл _carousel.scss, но без радости.

Могут ли помочь какие-нибудь другие программисты?, пожалуйста?

.carousel-item {
  height: 100vh;
}

.carousel-image-1 {
  background: url("../img/image1.jpg");
  background-size: cover;
}

.carousel-image-2 {
  background: url("../img/image2.jpg");
  background-size: cover;
}

.carousel-image-3 {
  background: url("../img/image3.jpg");
  background-size: cover;
}

@-webkit-keyframes zoom {
 from {
  -webkit-transform: scale(1, 1);
 }
 to {
  -webkit-transform: scale(1.5, 1.5);
 }
}

@keyframes zoom {
 from {
  transform: scale(1, 1);
 }
 to {
  transform: scale(1.5, 1.5);
 }
}

.carousel-inner .carousel-item {
  -webkit-animation: zoom 5s;
  animation: zoom 5s;
}

<section id="showcase">
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item carousel-image-1 active"></div>
    <div class="carousel-item carousel-image-2"></div>
    <div class="carousel-item carousel-image-3"></div>
  </div>
</div>