【jQuery】スライド時にぼかし効果（ブラーエフェクト）のアニメーションを追加したスライダー（slick）の実装方法のデモページ

.wrap {
  width: 800px;
  overflow: hidden;
  margin: 0 auto;
}

.slick-track {
  will-change: transform;
}

.slick-list {
  will-change: transform;
}

.slick-slide {
  padding: 0 100px;
}

@keyframes animate {
  0% {
    filter: url(#animate01);
    transform: scale(1, 1);
  }
  15% {
    filter: url(#animate02);
    transform: scale(1, 0.98);
  }
  30% {
    filter: url(#animate03);
    transform: scale(1, 0.95);
  }
  45% {
    filter: url(#animate04);
    transform: scale(1.1, 0.92);
  }
  60% {
    filter: url(#animate05);
    transform: scale(1.15, 0.9);
  }
  75%, 100% {
    filter: url(#animate06);
    transform: scale(1.2, 0.88);
  }
}
.active {
  animation: animate 0.1s linear forwards, animate 0.4s linear reverse forwards 0.1s;
}
@media screen and (max-width:640px){
  .wrap {
    width: 100%;
  }
}

$('.slider').slick({
  dots: true,
  autoplay: true,
  autoplaySpeed: 3000,
  speed: 500,
  pauseOnFocus: false,
  pauseOnHover: false,
  slidesToShow: 1,
  centerMode: true
});

$('.slider')
  .on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $('.slick-list').addClass('active')
  })
  .on('afterChange', function(){
    $('.slick-list').removeClass('active')
});