Twitter bootstrap 肯·伯恩斯在推特引导旋转木马上

我如何在Twitter引导转盘上应用一个应用程序

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

。。。似乎不适用于过渡

看到它在行动与

。。。似乎不适用于过渡

哦，但它确实如此您只需从小提琴的CSS代码中删除两个打字错误：

• a

  显示：内联块在任何选择器括号外

• 以

  /

  开头的注释，而不是使用

  /*…*/

这是你的，效果很好

只剩下一个问题：
Ken Burns效果仅从第二张幻灯片开始。这是因为第一张幻灯片是从“active”类开始的，而不是过渡到它。所以它从scale:1.5开始（应该是转换的结束值）

解决方案可以是使用CSS关键帧动画，而不是过渡。但是在这种情况下，使用一点JS要容易得多。bootstrap carousel使用JS anyway通过将类附加/分离到项目来在幻灯片之间切换

这里有一个解决方案（也被清理了一点），它使用一个额外的类“inactiveUntilOnLoad”，在加载期间中和“active”类，并在DOM就绪事件中删除，因此转换将从第一张幻灯片开始：

---

底线：

以下是“Ken Burns”virgin 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更改

将class.inactiveUntilOnLoad添加到第一个（活动）项

更新的JSFIDLE是。
只是更新第一张幻灯片的图像源，因为它已从原始源中删除

<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" />

还有jQuery插件：
您在这方面运气好吗？我看不到它在小提琴上工作？
$(function() {
  $('.inactiveUntilOnLoad').removeClass('inactiveUntilOnLoad');
});

<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" />