Ken Burns su Twitter Bootstrap Carousel

Question

Come si può applicare uno Ken Burns Effect su un caricatore di avvio di Twitter?

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

... sembra di non applicare la transizione.

vederlo in azione con jsFiddle ...

Answer 1

... sembra di non applicare la transizione.

Oh, ma lo fa! È sufficiente rimuovere due errori di battitura dal codice CSS del vostro violino:

• un display: inline-block; al di fuori di eventuali staffe di selezione
• un commento che iniziano con // anziché utilizzando /*...*/

Ecco il vostro corrected fiddle che funziona abbastanza bene.

C'è solo un problema di sinistra:
L'effetto Ken Burns inizia solo alla seconda diapositiva. Ciò è dovuto al fatto che la prima diapositiva inizia subito con la classe "attiva" e non si transita in essa. Quindi inizia con la scala: 1.5 (che dovrebbe essere il valore finale della transizione).

Una soluzione potrebbe essere quella di utilizzare animazioni di fotogrammi chiave CSS anziché transizioni. Ma in questo caso è molto più facile usare un po 'di JS. Il carosello di bootstrap utilizza comunque JS per passare da una diapositiva all'altra allegando/scollegando le classi agli elementi.

Ecco una soluzione (che è anche ripulito un bit), che utilizza una classe aggiuntiva "inactiveUntilOnLoad" che neutralizza la classe "attivo" durante il tempo di caricamento e che viene rimossa in DOM evento ready, così la transizione avrà luogo fin dalla prima diapositiva:
jsFiddle working from first slide

---

Bottomline:

Ecco tutte le modifiche necessarie per "Ken Burns" vergine Bootstrap 3 giostra:

CSS cambia
Definire transizione per .carousel .item img,
definire lo stato di partenza per .carousel .item img,
definire lo status finale per .carousel .item.active img,
aggiungere anche il selettore .carousel .item.active.inactiveUntilOnLoad img alla definizione di stato iniziale per creare l'animazione del primo fotogramma.

/* 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 cambia
Aggiungi classe .inactiveUntilOnLoad al primo elemento (attivo).

<div class="item active inactiveUntilOnLoad"> 

JS cambia
aggiungere codice per DOM evento pronti a rimuovere classe .inactiveUntilOnLoad.

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

Answer 2

Aggiornamento jsFiddle è here. Basta aggiornare la sorgente dell'immagine per la prima diapositiva poiché è stata rimossa dalla fonte originale.

<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

Inoltre v'è plugin per jQuery per questo: https://github.com/filippovjegor/bootstrap-kenbruns-carousel