我如何在Twitter Bootstrap Carousel上应用Ken Burns Effect？Ken Burns在Twitter上Bootstrap Carousel
.carousel .item img {
-webkit-transition: all 12s;
-moz-transition: all 12s;
-o-transition: all 12s;
transition: all 12s;
}
...似乎不适用过渡。
看到它与jsFiddle行动...
...似乎不适用的过渡。
哦，但它！你只需从你的小提琴的CSS代码删除两个错别字：
display: inline-block;任何选择括号//，而不是使用/*...*/这里的外面是你的corrected fiddle工作得很好。
剩下的只有一个问题：
Ken Burns效应只从第二张幻灯片开始。这是因为第一张幻灯片立即从“主动”类开始，并且不会转换成它。所以它从scale开始：1.5（这应该是转换的最终值）。
解决方案可能是使用CSS关键帧动画而不是转换。但在这种情况下，使用一点JS更容易。无论如何，引导转盘使用JS从幻灯片切换到幻灯片，方法是将类附加/分离到项目。
这里是一个溶液（其也清理一个位），使用一个附加的类“inactiveUntilOnLoad”期间加载时间中和“活性”级和设置在DOM就绪事件删除，所以过渡将于权从第一张幻灯片：
jsFiddle working from first slide
BOTTOMLINE：
这里是需要“肯伯恩斯”处女引导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');
});
更新的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" />
你有任何与此运气？我看不到它在小提琴上工作？ – Deano