jquery - 全屏 Bootstrap 4 旋转木马 Ken Burns 和淡入淡出

Question

我的目标是使用 Bootstrap 4 旋转木马创建放大“Ken Burns”效果和幻灯片之间的淡入淡出过渡。缩放效果需要 6 秒，淡入淡出过渡需要 1 秒。此外，当从最后一张和第一张幻灯片进行过渡时，轮播应该循环播放而不会被注意到。

缩放效果非常好，但在我的演示中它有一个“跳跃”，并且淡入淡出过渡效果不正常。我将不胜感激。谢谢!

演示

http://jsfiddle.net/beuL5dcp/

HTML

<div class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">

    <!--======= Wrapper for Slides =======-->
    <div class="carousel-inner">

            <!--========= First Slide =========-->
            <div class="carousel-item active" style="background-image: url('https://i.picsum.photos/id/878/1920/1680.jpg?hmac=_FQShv6E5HdjI6OKgjozFJQz8SXlT1OwmqijW5jHGQo')">
            </div>

            <!--========= Second Slide =========-->
            <div class="carousel-item" style="background-image: url('https://i.picsum.photos/id/874/1920/1680.jpg?hmac=KDczwg-ejraLUmoflMNUBCkt1LyLxNreJptc7RQajFY')">
            </div>

            <!--========= Third Slide =========-->
            <div class="carousel-item" style="background-image: url('https://i.picsum.photos/id/870/1920/1680.jpg?hmac=IAkVJX2zYS6BuaMLixYh5xoyOpeDH5WkcGTacBUPPXM')">
            </div>

     </div>

 </div>

CSS

.carousel-inner>.carousel-item
{
  margin:auto;
  height: 100vh;
  width:100%;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  transform-origin:50% 50%;
  -webkit-animation:kenburns 6000ms linear 0s infinite;
  animation:kenburns 6000ms linear 0s infinite
}
@-webkit-keyframes kenburns
{
  0%
  {
    -webkit-transform:scale(1);
    -webkit-transition:-webkit-transform 6000ms linear 0s
  }
  100%
  {
    -webkit-transform:scale(1.1);
    -webkit-transition:-webkit-transform 6000ms linear 0s
  }

}
@-moz-keyframes kenburns
{
  0%
  {
    -moz-transform:scale(1);
    -moz-transition:-moz-transform 6000ms linear 0s
  }
  100%
  {
    -moz-transform:scale(1.1);
    -moz-transition:-moz-transform 7000ms linear 0s
  }

}
@-ms-keyframes kenburns
{
  0%
  {
    -ms-transform:scale(1);
    -ms-transition:-ms-transform 6000ms linear 0s
  }
  100%
  {
    -ms-transform:scale(1.1);
    -ms-transition:-ms-transform 6000ms linear 0s
  }

}
@-o-keyframes kenburns
{
  0%
  {
    -o-transform:scale(1);
    -o-transition:-o-transform 6000ms linear 0s
  }
  100%
  {
    -o-transform:scale(1.1);
    -o-transition:-o-transform 6000ms linear 0s
  }

}
@keyframes kenburns
{
  0%
  {
    transform:scale(1);
    transition:transform 6000ms linear 0s
  }
  100%
  {
    transform:scale(1.1);
    transition:transform 6000ms linear 0s
  }

}

Answer 1

“跳跃”的问题不是因为@keyframes 前缀，而是因为错误的时机。出于某种原因，缩放动画比旋转木马快，所以它很快就会再次开始。它会导致“跳跃”效果，因为它会返回先前状态 scale(1) 中的图像。

您应该稍微尝试一下 CSS 动画的长度。例如，如果您将所有动画从 6000 毫秒更改为 7000 毫秒，它应该可以完成这项工作。