Ken Burns sur Twitter Bootstrap Carousel

Question

Comment puis-je appliquer un Ken Burns Effect sur un carrousel Bootstrap Twitter?

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

... ne semble pas appliquer de transition.

Voir en action avec jsFiddle ...

Answer 1

... semble ne pas appliquer la transition.

Oh, mais c'est le cas! Il vous suffit de retirer deux fautes de frappe du code CSS de votre violon:

• un display: inline-block; en dehors de toute supports de sélection
• un commentaire commençant par // au lieu d'utiliser /*...*/

Voici votre corrected fiddle ça marche plutôt bien.

Il n'y a qu'un seul problème reste:
L'effet Ken Burns, commence seulement à la deuxième diapositive. Cela est dû au fait que la toute première diapositive commence tout de suite par la classe "active" et ne passe pas à celle-ci. Donc ça commence par l'échelle: 1.5 (qui devrait être la valeur finale de la transition).

Une solution pourrait être d'utiliser des animations d'images clés CSS au lieu de transitions. Mais dans ce cas, il est beaucoup plus facile d'utiliser un peu de JS. Le carrousel bootstrap utilise JS de toute façon pour passer d'une diapositive à l'autre en attachant/détachant des classes aux objets.

Voici une solution (qui est également nettoyé un peu), qui utilise une classe supplémentaire « inactiveUntilOnLoad » qui neutralise la classe « actif » pendant le temps de charge et qui est retiré à l'événement DOM prêt, alors la transition aura lieu dès la première diapositive:
jsFiddle working from first slide

---

BOTTOMLINE:

Voici tous les changements nécessaires pour "Ken Burns" Bootstrap vierge 3 carrousel:

change CSS
Define transition pour .carousel .item img,
définir le statut de départ pour .carousel .item img,
définir le statut final pour .carousel .item.active img,
également ajouter le sélecteur .carousel .item.active.inactiveUntilOnLoad img à la définition de l'état de démarrage pour créer une animation de la première image.

/* 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 change
Ajouter une classe .inactiveUntilOnLoad au premier article (actif).

<div class="item active inactiveUntilOnLoad"> 

JS change
Ajouter un code à l'événement DOM prêt à supprimer la classe .inactiveUntilOnLoad.

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

Answer 2

Mise à jour jsFiddle est here. Juste mettre à jour la source d'image pour la première diapositive car elle a été supprimée de la source d'origine.

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

Answer 3

Aussi il y a plugin jQuery pour cela: https://github.com/filippovjegor/bootstrap-kenbruns-carousel