Ken Burns on Twitter Bootstrap Carousel

Question

How could I apply a Ken Burns Effect on a Twitter Bootstrap Carousel?

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

... seems not to apply transition.

See it in action with jsFiddle...

Answer 1

... seems not to apply transition.

Oh, but it does! You only have to remove two typos from the CSS code of your fiddle:

• a display: inline-block; outside of any selector brackets
• a comment starting with // instead of using /*...*/

Here is your corrected fiddle that works quite well.

There is only one problem left:
The Ken Burns effect only starts at the second slide. This is due to the fact that the very first slide starts with the "active" class right away and does not transition into it. So it start with scale:1.5 (which should be the end value of the transition).

A solution could be to use CSS keyframe animations instead of transitions. But in this case it is much easier to use a bit of JS. The bootstrap carousel uses JS anyway to change from slide to slide by attaching/detaching classes to the items.

Here is a solution (that is also cleaned up a bit), that uses an additional class "inactiveUntilOnLoad" that neutralizes the "active" class during load time and that is removed at DOM ready event, so the transition will take place right from the first slide:
jsFiddle working from first slide

---

BOTTOMLINE:

Here are all changes needed to "Ken Burns" a virgin Bootstrap 3 carousel:

CSS changes
Define transition for .carousel .item img,
define start status for .carousel .item img,
define end status for .carousel .item.active img,
also add selector .carousel .item.active.inactiveUntilOnLoad img to definition of start status to create animation of first frame.

/* 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 changes
Add class .inactiveUntilOnLoad to first (active) item.

<div class="item active inactiveUntilOnLoad">

JS changes
Add code to DOM ready event to remove class .inactiveUntilOnLoad.

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