Question

如何在Twitter Bootstrap Carousel上应用Ken Burns Effect？

.carousel .item img {
-webkit-transition: all 12s;
-moz-transition: all 12s;
-o-transition: all 12s;
transition: all 12s;
}

......似乎不适用过渡。

使用jsFiddle ...

查看此操作

Answer 1

......似乎不适用过渡。

哦，但确实如此！你只需要从小提琴的CSS代码中删除两个拼写错误：

任何选择器括号外的display: inline-block;
以//开头而非使用/*...*/

这是你的corrected fiddle，效果很好。

只剩下一个问题：
Ken Burns效应仅在第二张幻灯片开始。这是因为第一张幻灯片以＆＃34; active＆＃34;开头。上课，不会过渡到它。所以它从scale开始：1.5（应该是转换的结束值）。

解决方案可能是使用CSS关键帧动画而不是过渡。但在这种情况下，使用一些JS要容易得多。无论如何，bootstrap轮播使用JS通过将类附加/分离到项目来从幻灯片更改为幻灯片。

这是一个解决方案（也有点清理），它使用了另一个类＆＃34; inactiveUntilOnLoad ＆＃34;中和了＆＃34; 活跃＆＃34;加载时间内的类以及在DOM就绪事件中删除的类，因此转换将直接从第一张幻灯片发生：
jsFiddle working from first slide

<强> BOTTOMLINE：

以下是＆＃34; Ken Burns＆＃34;所需的所有更改。处女Bootstrap 3轮播：

CSS更改
定义.carousel .item img的转换，
定义.carousel .item img的开始状态，
定义.carousel .item.active img的结束状态，
还要将选择器.carousel .item.active.inactiveUntilOnLoad img添加到开始状态的定义中，以创建第一帧的动画。

/* transition */
.carousel .item img {
  -webkit-transition: all 5s;
  -moz-transition: all 5s;
  -o-transition: all 5s;
  transition: all 5s;
}
/* start status */
.carousel .item img,
.carousel .item.active.inactiveUntilOnLoad img {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
/* end status */
.carousel .item.active img {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

HTML更改
将类 .inactiveUntilOnLoad 添加到第一个（活动）项目。

<div class="item active inactiveUntilOnLoad">

JS更改
将代码添加到DOM ready事件中以删除类 .inactiveUntilOnLoad 。

$(function() {
  $('.inactiveUntilOnLoad').removeClass('inactiveUntilOnLoad');
});

Answer 2

更新的jsFiddle是here。只需在第一张幻灯片从原始源中删除时更新图像源。

<img src="http://3.bp.blogspot.com/-aIa3upFFC0M/UU2QTk3SJ6I/AAAAAAAAJo4/vcVayWzOjmc/s1600/sky+cloud+wallpapers+hd+(10).jpg" data-src="http://3.bp.blogspot.com/-aIa3upFFC0M/UU2QTk3SJ6I/AAAAAAAAJo4/vcVayWzOjmc/s1600/sky+cloud+wallpapers+hd+(10).jpg" alt="First slide" />

Answer 3

此外还有jQuery插件： https://github.com/filippovjegor/bootstrap-kenbruns-carousel

Ken Burns在Twitter Bootstrap Carousel上

3 个答案: