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="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动画

1 个答案: