我如何在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