Slick Slider 上带有淡入淡出过渡的 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)*/
}

.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);
  }
}