Ken Burns 在 Twitter 上的 Bootstrap 轮播

我怎样才能申请肯·伯恩斯效应 http://en.wikipedia.org/wiki/Ken_Burns_effect在 Twitter Bootstrap 轮播上？

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

...似乎不适用过渡。

查看它的实际应用jsFiddle http://jsfiddle.net/dynamick/gRtCs/2/...

...似乎不适用过渡。

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

• a display: inline-block;在任何选择器括号之外
• 以以下内容开头的评论//而不是使用/*...*/

这是你的纠正小提琴 http://jsfiddle.net/gRtCs/6/效果很好。

只剩下一个问题了：
肯·伯恩斯效果仅在第二张幻灯片上开始。这是因为第一张幻灯片立即从“活动”类开始，并且不会过渡到其中。所以它从scale:1.5开始（这应该是转换的最终值）。

解决方案可能是使用 CSS 关键帧动画而不是过渡。但在这种情况下，使用一点 JS 会容易得多。引导轮播无论如何都使用 JS 通过向项目附加/分离类来从一张幻灯片切换到另一张幻灯片。

这是一个解决方案（也进行了一些清理），它使用了一个附加类“加载前处于非活动状态” 中和“active" 加载时的类，并在 DOM 就绪事件时删除，因此转换将从第一张幻灯片开始：
jsFiddle 从第一张幻灯片开始工作 http://jsfiddle.net/gRtCs/9/

底线：

以下是“Ken Burns”原始 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 就绪事件以删除类.inactiveUntilOnLoad.

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