Javascript 平滑滑块上带有淡入过渡的CSS动画

我正在实现slick滑块，并使用css动画为图像添加了Ken Burn的效果

在幻灯片更改之前，我在动画中得到了一个跳跃-图像似乎回到了原始状态。真的，我想要平稳过渡。有没有关于如何修复的想法

请参见代码笔上的示例：

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>

---

默认的变换比例小于动画的结束

动画最终状态（前进）对您的情况没有帮助，因为在转换到下一张幻灯片时，触发动画的类将被删除

.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'）。光滑({
真的，
自动播放：对，
自动播放速度：7000，
箭头：错，
点：是的，
是的，
速度:500,，
无限：是的，
cssEase:“轻松进出”，
触摸阈值：100
})

body，
html{
身高：100%；
背景：#333；
字体系列：“Roboto”，无衬线；
}
.幻灯片放映{
位置：相对位置；
z指数：1；
身高：100%；
最大宽度：700px；
保证金：50px自动；
}
.幻灯片*{
大纲：无；
}
.slideshow.slideshow{
盒影：0 20px 50px-25px黑色；
}
.幻灯片放映.滑块轨迹{
-webkit过渡：所有1s立方贝塞尔（0.7,0,0.3,1）；
过渡：所有1s三次贝塞尔（0.7,0,0.3,1）；
}
.幻灯片.项目{
身高：100%；
位置：相对位置；
z指数：1；
}
.幻灯片.项目img{
宽度：100%；
-webkit过渡：所有1s立方贝塞尔（0.7,0,0.3,1）；
过渡：所有1s三次贝塞尔（0.7,0,0.3,1）；
-webkit转换：规模（1.3）；
转换：比例（1.3）；
}
.slideshow.item.slick-active img{
-webkit转换：规模（1）；
变换：比例（1）；
-webkit动画：cssAnimation 8s 1缓进缓出向前；
动画：cssAnimation 8s 1缓进缓出向前；
}
@关键帧cssAnimation{
从{
-webkit转换：缩放（1）转换（0px）；
}
到{
-webkit转换：缩放（1.3）转换（0px）；
}
}
@-webkit关键帧cssAnimation{
从{
-webkit转换：缩放（1）转换（0px）；
}
到{
-webkit转换：缩放（1.3）转换（0px）；
}
}

-webkit转换：比例（1.2）；转换：比例（1.2）；应该是1.3，因为在动画关键帧的末尾，您可以提供更多关于为什么的详细信息吗？动画从

比例（1）

（覆盖默认的

比例（1.2）

）结束于

1.3

-如果您想保持动画的最终状态，您必须添加动画前进-

动画8s1缓进快退前进

；-但这对您没有帮助，因为触发动画的类在转换到下一张幻灯片时被删除，因此它将再次跳回默认比例（1.2）有意义吗？谢谢这真的很有帮助出于某种原因，我仍然可以使用图像进行跳转为了使它更好，将比例1.3更改或删除为：。幻灯片。项目img{-webkit transform:scale（1）；transform:scale（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)*/
}