スライダーをズームアップさせたい

slickでスライダーを作ったのですが、ズームアップさせながら画像を表示/切替させたいです。
一通りのアニメーションで動きはできたのですが、ループさせると動きがカクカクなってぎこちなく、またループを外すと途中から動かなくなります。

色々参考サイトを調べたのですが、一通り試してみてもうまくいかなかったので、ご助言いただければ幸いです。

以下、コードになります。

HTML
1    <div class="slick">
2      <img src="images/business1.jpg" alt="" />
3      <img src="images/top-img2.jpg" alt="" />
4      <img src="images/top-img.jpg" alt="" />
5      <img src="images/business1.jpg" alt="" />
6      <img src="images/top-img2.jpg" alt="" />
7    </div>

SCSS
1.slick {
2  margin: 0 auto;
3  width: 1000px;
4  height: 1000px;
5  margin-top: 200px;
6  img {
7    width: 100%;
8    height: 100%;
9  }
10}
11
12.slick-slide {
13  animation: fadezoom 8s 0s forwards infinite;
14  .moving {
15    @keyframes fadezoom {
16      0% {
17        transform: scale(1);
18      }
19      100% {
20        transform: scale(1.2);
21      }
22    }
23  }
24}

JQuery
1$(".slick")
2  .on("init", function () {
3    $('.slick-slide[data-slick-index="0"]').addClass("moving");
4  })
5  .slick({
6    arrows: false,
7    dots: false,
8    infinite: true,
9    fade: true,
10    speed: 2400,
11    autoplay: true,
12    pauseOnHover: false,
13    autoplayspeed: 5000,
14    centerMode: true,
15  })
16  .on("beforeChange", function (event, slick, currentSlide, nextSlide) {
17    var slide_num = $(".slick-slide").length;
18    $('.slick-slide[data-slick-index="' + (currentSlide - 1) + '"]').removeClass("moving");
19    $('.slick-slide[data-slick-index="' + nextSlide + '"]').addClass("moving");
20    if (currentSlide == 0) {
21      $('.slick-slide[data-slick-index="' + (slide_num - 1) + '"]').removeClass("moving");
22    }
23  });