title: Slick Slider with ken-burns-out image jumps bug
body: <p>After the slide animation (scale(1.3) to scale(1)) finishes and moving back to the slide I get this annoying jump.
  <br></p>
  
  <p>I want that each active slide will be already in scale(1.3) without the jump.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $('.home-slider').slick({
       slidesToScroll: 1,
          slidesToShow: 1,
          //arrows: true,
          autoplay: true,
          autoplaySpeed: 7000,
          dots: false
    })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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 .item {
    height: 100%;
    position: relative;
    z-index: 1;
  }
  .slideshow .item img {
    width: 100%;
    
  }
  .slideshow .item.slick-active img {
    -webkit-animation: ken-burns-out 8s 1 ease-in-out forwards;
    animation: ken-burns-out 8s 1 ease-in-out forwards;
  }
  
  
  /*//The animation: from 1.3 scale to 1*/
  @-webkit-keyframes ken-burns-out {
      0% {
          -webkit-transform: scale(1.3);
          transform: scale(1.3)
      }
  
      to {
          -webkit-transform: scale(1);
          transform: scale(1)
      }
  }
  
  @keyframes ken-burns-out {
      0% {
          -webkit-transform: scale(1.3);
          transform: scale(1.3)
      }
  
      to {
          -webkit-transform: scale(1);
          transform: scale(1)
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"&gt;&lt;/script&gt;
  
  
  
  
  
  &lt;div class="slideshow"&gt;
    &lt;div class="home-slider"&gt;
      &lt;div class="item"&gt;
        &lt;img src="https://images.unsplash.com/photo-1532386236358-a33d8a9434e3?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=978&amp;q=80" /&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>