<section class="slick_container">
    <div class="slick02">
        <div class="slick-slide slide01 add-animation">
            <img src="画像名" alt="">
        </div>
        <div class="slick-slide slide02">
            <img src="画像名" alt="">
        </div>
        <div class="slick-slide slide03">
            <img src="画像名" alt="">
        </div>
    </div>
    <div class="result"></div>
</section>

.slick_container {
    .slick02 {
        width: 100%;
        overflow: hidden;
        .slick-slide {
            width: 100%;
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        button {
            position: absolute;
            top: 50%;
            z-index: 1;
            &.slick-prev {
                left: 0;
                display: inline-block;
                vertical-align: middle;
                color: #fff;
                line-height: 1;
                width: 1.5em;
                height: 1.5em;
                transform: translateX(25%) rotate(-135deg);
                &:before, &:after {
                    content: '';
                    position: absolute;
                    background: currentColor;
                    border-radius: 0.1em;
                }
                &:before {
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 0.3em;
                }
                &:after {
                    top: 0;
                    right: 0;
                    bottom: 0;
                    width: 0.3em;
                }
            }
            &.slick-next {
                right: 0;
                display: inline-block;
                vertical-align: middle;
                color: #fff;
                line-height: 1;
                width: 1.5em;
                height: 1.5em;
                transform: translateX(-20%) rotate(45deg);
                &:before, &:after {
                    content: '';
                    position: absolute;
                    background: currentColor;
                    border-radius: 0.1em;
                }
                &:before {
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 0.3em;
                }
                &:after {
                    top: 0;
                    right: 0;
                    bottom: 0;
                    width: 0.3em;
                }
            }
        }
    }
    .slick02 {
        .slick-slide {
            &.add-animation {
                animation: zoomOut 10s linear 0s normal both;
            }
        }
    }
}

$(function(){
  // スライド移動後に発生するイベント
  $('.slick02')
  .slick({
    autoplay:true,
    autoplaySpeed:2000,
    slidesToShow:1,
    arrows:true,
    fade:true,
    prevArrow: '<button class="slick-prev slick-arrow">', // 矢印のhtml要素を記述
    nextArrow: '<button class="slick-next slick-arrow">', // 矢印のhtml要素を記述
  })
  
  .on({
    // スライドが移動する前に発生するイベント
    beforeChange: function (event, slick, currentSlide, nextSlide) {
      $(".slick-slide", this).eq(nextSlide).addClass("add-animation");
      $(".slick-slide", this).eq(currentSlide).addClass("remove-animation");
    },
    // スライドが移動した後にクラスを付与
    afterChange: function () {
      $(".remove-animation", this).removeClass("remove-animation add-animation");
    }
  })
});