CSS Animation with Fade Transition on Slick Slider

Question

I'm implementing the slick slider and have added a Ken Burn's effect to images using css animation.

I'm getting a jump in the animation before the slide changes - the image seems to go back to its original state. Really I'm after a smooth transition. Any ideas on how to fix?

See Example on Code Pen: https://codepen.io/katundu/pen/aJJqWv

JS

  $('.slider').slick({
    draggable: true,
    autoplay: true,
    autoplaySpeed: 7000,
    arrows: false,
    dots: true,
    fade: true,
    speed: 500,
    infinite: true,
    cssEase: 'ease-in-out',
    touchThreshold: 100
  })

Slide Show

<div class="slideshow">
  <div class="slider">
    <div class="item">
      <img src="http://tesla.uk-cpi.com/login/resources/market-built-environment-3-w1920h1080.jpg" />
    </div>
    <div class="item">
      <img src="http://tesla.uk-cpi.com/login/resources/pipes-w1920h1080.jpg" />
    </div>
  </div>
</div>

CSS and Animation

body,
html {
  height: 100%;
  background: #333;
  font-family: 'Roboto', sans-serif;
}

.slideshow {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 700px;
  margin: 50px auto;
}
.slideshow * {
  outline: none;
}
.slideshow .slider {
  box-shadow: 0 20px 50px -25px black;
}
.slideshow .slider-track {
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}
.slideshow .item {
  height: 100%;
  position: relative;
  z-index: 1;
}
.slideshow .item img {
  width: 100%;
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.slideshow .item.slick-active img {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-animation: cssAnimation 8s 1 ease-in-out;
  animation: cssAnimation 8s 1 ease-in-out;
}

@keyframes cssAnimation {
  from {
    -webkit-transform: scale(1) translate(0px);
  }
  to {
    -webkit-transform: scale(1.3) translate(0px);
  }
}
@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: scale(1) translate(0px);
  }
  to {
    -webkit-transform: scale(1.3) translate(0px);
  }
}

Answer 1

Your default transform scale is smaller than the end of animation.

Animation final state (forwards) won't help your case, because on the transition to the next slide, class triggering the animation gets removed.

.slideshow .item img {
  width: 100%;
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: scale(1.3);/*-webkit-transform: scale(1.2);*/
          transform: scale(1.3);/*transform: scale(1.2)*/
}

  $('.slider').slick({ draggable: true, autoplay: true, autoplaySpeed: 7000, arrows: false, dots: true, fade: true, speed: 500, infinite: true, cssEase: 'ease-in-out', touchThreshold: 100 }) 

 body, html { height: 100%; background: #333; font-family: 'Roboto', sans-serif; } .slideshow { position: relative; z-index: 1; height: 100%; max-width: 700px; margin: 50px auto; } .slideshow * { outline: none; } .slideshow .slider { box-shadow: 0 20px 50px -25px black; } .slideshow .slider-track { -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); } .slideshow .item { height: 100%; position: relative; z-index: 1; } .slideshow .item img { width: 100%; -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); transition: all 1s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transform: scale(1.3); transform: scale(1.3); } .slideshow .item.slick-active img { -webkit-transform: scale(1); transform: scale(1); -webkit-animation: cssAnimation 8s 1 ease-in-out forwards; animation: cssAnimation 8s 1 ease-in-out forwards; } @keyframes cssAnimation { from { -webkit-transform: scale(1) translate(0px); } to { -webkit-transform: scale(1.3) translate(0px); } } @-webkit-keyframes cssAnimation { from { -webkit-transform: scale(1) translate(0px); } to { -webkit-transform: scale(1.3) translate(0px); } } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <div class="slideshow"> <div class="slider"> <div class="item"> <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" /> </div> <div class="item"> <img src="https://images.unsplash.com/photo-1532386236358-a33d8a9434e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=978&q=80" /> </div> </div> </div>