Animazioni di catene CSS3

Question

Ho una serie di animazioni che devo eseguire su un testo e stavo progettando di utilizzare CSS3. Il mio piano è di avere del testo che si muove lentamente lungo lo schermo e dopo aver raggiunto una certa parte dello schermo, alcune parole verranno evidenziate e alla fine il testo continuerà a muoversi lungo lo schermo e scomparirà lasciando spazio per ulteriori testi.

La mia domanda è, qual è il modo migliore per "concatenare" queste animazioni. Dovrei avere un'animazione per spostarti sullo schermo, un'animazione separata per evidenziare il testo e una terza animazione per spostarti sul resto dello schermo? Quindi, dovrei impostare un ritardo di animazione per avviare solo la seconda e la terza animazione una volta completate le animazioni precedenti? Penso che sto bene con la creazione di animazioni separate che saranno incatenate insieme, ma non sono sicuro di come queste animazioni dovrebbero far scattare l'animazione successiva.

Answer 1

Esistono diversi modi per concatenare le animazioni: esiste il puro modo CSS, che utilizza il ritardo -webkit-animazione, in cui si definiscono più animazioni e si indica al browser quando avviarle, ad es.

-webkit-animation: First 1s, Second 2s; 
-webkit-animation-delay: 0s, 1s; 
/* or -moz etc.. instead of -webkit */ 

Un altro modo è associare all'evento di fine animazione, quindi avviarne un altro. Ho trovato questo inaffidabile, però.

$('#id') 
    .bind('webkitAnimationEnd',function(){ Animate2() }) 
    .css('-webkit-animation','First 1s'); 

Il terzo modo è impostare i timeout in Javascript e modificare la proprietà di animazione css. Questo è quello che uso la maggior parte del tempo, poiché è il più flessibile: puoi cambiare facilmente i tempi, annullare le sequenze di animazione, aggiungerne di nuovi e diversi, e non ho mai avuto un problema di errore come quello che ho legato alla transizioneEnd evento.

$('#id').css('-webkit-animation','First 1s'); 
window.setTimeout('Animate2("id")', 1000); 
function Animate2.... 

è più il codice di un vicolo cieco, e più di CSS, naturalmente, ma è relable e più flessibile, imho.

Answer 2

Stava solo creando una catena di animazioni in Chrome 16 usando il "giusto" - e in generale: licenziando la seconda animazione su webkitAnimationEnd, con le animazioni definite dai fotogrammi chiave a cui fa riferimento una regola di classe che definisce l'animazione- * variabili e attivate aggiungendo il nome della classe agli elementi di destinazione. Questo è "giusto" perché definisce tutti gli intervalli di tempo relativamente, una volta, perché è il più flessibile (ad esempio ogni animazione può coinvolgere elementi separati, che non è possibile fare all'interno di un keyframe), e perché massimizza l'utilizzo di CSS3.

Errore. Risolto il problema rimuovendo il nome della transizione completata prima di lanciare il prossimo!

Answer 3

Mentre cercavo la stessa cosa, senza l'utilizzo di qualcosa come jQuery, mi è venuta in mente la stessa idea di concatenare, ascoltando webKitanimationEnd, come suggerito da altri. In questo modo puoi usare i CSS per le transizioni e per i tempi dell'animazione.

È possibile creare un array come coda e aggiungere l'elemento che si desidera animare (con alcune opzioni come effetto e tipo di animazione). Quindi, puoi elaborare questa coda andando alla successiva animazione quando termina un'animazione. Questa animazione potrebbe essere un elemento diverso o un'animazione successiva allo stesso elemento. Ricordarsi di rimuovere la classe di animazione dallo className quando l'animazione termina. Per ogni passaggio, aggiungi le classi CSS appropriate e rimuovile quando l'animazione è terminata. Poiché ascoltiamo animationEnd, i tempi possono essere eseguiti solo con i CSS, lasciando solo l'elaborazione a JavaScript.

Questo è un compito talmente minimale che se il tuo progetto non sta già utilizzando una libreria come jQuery, dovresti semplicemente usare Vanilla JS.

Ho fatto qualche ricerca e sono riuscito a mettere insieme qualcosa. Vedere this fiddle per un esempio:

var manager = new AnimationManager(); 
manager.enqueue(animations).animate(); 

Il prodotto finale è sul mio github repo.

Spero che questo vi fornisca alcuni suggerimenti/aiuto.