光滑滑塊上帶有淡入淡出過渡的CSS動畫

Question

我正在實現光滑的滑塊，並使用css動畫為圖像添加了Ken Burn效果。

在幻燈片更改之前，我在動畫中有所跳躍-圖像似乎恢復了其原始狀態。 確實，我正在順利過渡。 有關如何解決的任何想法？

請參閱電筆上的示例： 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
  })

幻燈片放映

<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和動畫

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

您的默認變換比例小於動畫的結尾。

動畫的最終狀態（向前）不會幫助您解決問題，因為在過渡到下一張幻燈片時，觸發動畫的類將被刪除。

.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>