Delaying Animation on Click Slide Change

Question

I have a slick slider that use a fade transition. Each active slide has an animation that scales the background image of the slide. When the slide changes the animation is removed from the slide.

When manually clicking to a new slide the scale jumps back to the default size before the transition finished creating a jump on the image. My question is how do I delay the removal of the animation so I don't get that jump back to the default scale?

Code is below, and you can see an example here: http://tesla.uk-cpi.com/

JS

// Slider on Home Page
$('.homeSlider').slick({
     draggable: true,
     autoplay: true,
     autoplaySpeed: 7000,
     arrows: false,
     dots: true,
     fade: true,
     speed: 500,
     infinite: true,
     cssEase: 'linear',
     touchThreshold: 100,
     customPaging : function(homeSlider, i) {
        var title = $(homeSlider.$slides[i]).data('title');
        var number = $(homeSlider.$slides[i]).data('index-number');

        return '<a class="pager__item" onClick=reset()><div class="slide-number">'+number+'</div><div class="slide-title">'+title+'</div></a>';
    },
});

$('.slick-active .item').addClass('kenburnseffect');

$('.homeSlider').on('afterChange', function(event, slick, currentSlide){
    $('.item').removeClass('kenburnseffect');
    $('.slick-active .item').addClass('kenburnseffect');
});

CSS

  .item {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

@-webkit-keyframes kenburns {
  from {
    -webkit-transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@keyframes kenburns {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

Answer 1

Use setTimeout,

$('.homeSlider').on('afterChange', function(event, slick, currentSlide){
    setTimeout(function(){
        $('.item').removeClass('kenburnseffect');
        $('.slick-active .item').addClass('kenburnseffect');
    },1000);
});

Here, time delay is given 1000 milli-seconds