Le animazioni dei fotogrammi chiave CSS aprono una vasta gamma di possibilità per ciò che può essere realizzato con i CSS. Molto più che semplici transizioni one-step, i fotogrammi chiave possono essere utilizzati per realizzare animazioni complesse e multi-step che sono piuttosto impressionanti.
Nel progetto di oggi, inizieremo da zero e costruiremo una pila di due foto che si espandono e scambiano il loro ordine di sovrapposizione quando si passa sopra di loro. Lungo la strada impareremo tutto su come brandire i fotogrammi chiave come un professionista e destreggiarsi tra tutti quei prefissi che girano la testa!
Cosa stiamo costruendo
Il concetto per questo progetto è piuttosto semplice. Immagina due foto, ruotate casualmente e impilate l'una sull'altra come se le avessi gettate su una scrivania. Il problema è che puoi solo vedere la foto in alto!
Per aiutare la foto in basso a catturare l'attenzione che merita, creeremo un evento al passaggio del mouse che separa prima le due foto, quindi fa scorrere la foto in alto dietro la foto in basso, cambiando effettivamente l'ordine di sovrapposizione.
Le probabilità sono, se leggi questo blog, sei un pensatore visivo, ecco come appare nelle immagini:
Animazioni di fotogrammi chiave e transizioni
Al momento il CSS ha due opzioni principali per l'animazione di un elemento: transizioni e fotogrammi chiave. Ogni volta che vuoi animare qualcosa, devi analizzare la situazione e decidere quale metodo è appropriato. Fortunatamente, decidere tra i due è davvero facile.
Ogni volta che hai una semplice animazione con un solo passaggio, una transizione è la soluzione perfetta. Ad esempio, se vuoi che qualcosa ruoti leggermente quando passi il mouse su di esso, probabilmente otterrai un effetto con una transizione. È sufficiente impostare lo stato originale, quindi lo stato ruotato e la transizione tra i due.
Ora, immagina di voler prendere ulteriormente questa idea e creare un quadrante animato come vedresti per rompere una cassaforte. Probabilmente vorresti che ruoti in senso orario per un secondo, poi in senso antiorario, poi magari di nuovo in senso orario, ti viene l'idea. Per questo scenario, vorresti sicuramente andare con un'animazione di fotogrammi chiave.
Quale dovremmo usare?
Sopra, abbiamo delineato l'animazione che vogliamo raggiungere. Ovviamente, sarà piuttosto complesso. Più oggetti si muoveranno avanti e indietro, ruotando e scambiando il loro ordine di accatastamento. Data questa complessità, le animazioni dei fotogrammi chiave sono la scelta naturale.
Supporto del browser
È bene tenere a mente che entrambi i fotogrammi chiave e le transizioni ora hanno un supporto discreto sui principali browser? tranne ovviamente per IE. Per quanto posso dire, né le transizioni né le animazioni saranno supportate fino a IE10, quindi ovviamente non si vuole fare affidamento su di esse per nessuna delle principali funzionalità.
Fonte: CanIUse.com
Passo 1. L'HTML
Basta accumulare, saltiamo nella costruzione di questo pollone. La prima cosa da fare è tracciare il progetto in HTML. Questo è ovviamente estremamente facile. Tutto ciò di cui abbiamo bisogno è un contenitore con due immagini.
Controllo avanzamento
A questo punto, tutto il nostro stile visivo di base è finito. Dovresti avere una bella piccola pila di foto che assomigli a questa:
Passaggio 5. Pianifica l'animazione
Ora che abbiamo impostato le foto nel modo che ci piace, dobbiamo pianificare le specifiche di come li faremo muovere. Dato che ci sono due foto, avremo bisogno di pianificare i movimenti specifici di ciascuno.
Pic One
La prima immagine inizia in fondo alla pila. La maggior parte del movimento si svolgerà sull'altra foto, ma voglio far sembrare che questa si stacchi e faccia spazio per l'altra, quindi la ruoteremo leggermente.
Senza preoccuparci della sintassi attuale, pianifichiamo ogni passaggio. I fotogrammi chiave utilizzano le percentuali per tracciare l'animazione, quindi è quello che useremo qui.
- 0%: ruota (-7deg)
- 50%: ruota (-14 gradi)
- 100%: ruota (-7deg)
Come puoi vedere, iniziamo con la rotazione predefinita di -7, quindi passiamo a una rotazione di -14 e infine ruotiamo di nuovo verso il punto da cui siamo partiti.
Pic Two
La seconda foto è molto più complicata. Questa volta, vogliamo spostare la foto di qualche centinaio di pixel verso destra mentre lo ruotiamo, scambialo fino in fondo alla risma, quindi riportalo indietro nel punto in cui è iniziato rimanendo in basso. Ecco come appare:
- 0%: lasciato 100px, z-index 1, ruota (7deg)
- 49%: lasciato 350px, z-index 1, ruota (20deg)
- 50%: lasciato 350px, z-index -3, ruota (20deg)
- 100%: lasciato 100px, z-index -3, ruota (7deg)
Si noti che i passaggi al 49% e al 50% sono identici a parte il valore z-index. Non vogliamo che questa foto salti in fondo alla pila finché non si allontana dall'altra, quindi dobbiamo spostarla prima di buttarla giù.
Codifica l'animazione
Ora che abbiamo pianificato concettualmente l'animazione, è tempo di codificare effettivamente le versioni CSS. Usando le progressioni che abbiamo appena creato, questo risulta essere piuttosto facile. Ricorda che questo è solo la definizione delle animazioni, le implementeremo in seguito.
Prefisso Mayhem
La parte peggiore in assoluto nell'uso delle animazioni dei fotogrammi chiave nei CSS è il caos di codice che devi utilizzare per estrarle da tutti i browser possibili. Il codice che abbiamo appena scritto è abbastanza semplice, ma ora dobbiamo ripeterlo con tutti i vari prefissi.
In realtà c'è una lezione importante qui, quindi questa è una buona pratica. La parte difficile è che abbiamo incorporato una proprietà che ha bisogno di prefisso (trasformazione) all'interno di un'altra (@keyframes). Questo porta a un grande mal di testa. E per grande intendo più di duecento righe di codice grande.
? Questo porta a un grande mal di testa. E per grande, intendo oltre duecento righe di codice grande.?Per il frammento sopra, abbiamo bisogno di espandere tutti i giri in modo che abbiano tutti e quattro i principali prefissi (webkit, moz, o e ms). Quindi dobbiamo ripetere l'intera operazione aggiungendo i prefissi appropriati alla riga @keyframe, ma all'interno di ognuno di questi, è sufficiente la proprietà di rotazione standard insieme al prefisso che corrisponde al prefisso del keyframe principale. Confuso ancora? Anche a me.
Fortunatamente, Prefixr è qui per salvare il giorno. Prendi la sintassi standard da sopra e rilasciala, quindi verranno fuori tutti i vari pezzi necessari per farlo funzionare.
Ma stai scherzando?
Oltre 250 righe di codice solo per definire alcune semplici animazioni? Cosa fumo? Sfortunatamente, se vogliamo risolvere questo problema con i CSS, questo è ciò di cui avremo bisogno fino a quando i fotogrammi chiave diventeranno una funzione standard non prefissata.
La lezione qui è di fare attenzione quando si aggiunge complessità alle animazioni dei fotogrammi chiave perché diventa follemente veloce. La seconda lezione è che jQuery è ancora spesso la soluzione più semplice per estrarre semplici animazioni cross-browser!
Attivare le animazioni
La semplice definizione delle animazioni dei fotogrammi chiave non fa accadere nulla, dobbiamo implementarli con l'animazione? sintassi. Per fare ciò, usiamo la sintassi dell'animazione.
Vogliamo che ciò accada quando passiamo il mouse sopra il contenitore, quindi usiamo .container: hover, quindi differenziare in base alla classe per ciascuna delle nostre immagini.
Qui abbiamo chiamato l'animazione usando i nomi che abbiamo impostato prima, impostiamo la lunghezza a un secondo e mezzo, impostiamo l'iterazione su due e poi usiamo alternato in modo che la prima iterazione attraversi i passaggi in ordine e il secondo li attraversi all'indietro, così finiamo dove abbiamo iniziato.
Guardalo!
Buone notizie, siamo tutti finiti. Per vedere il mio codice completo insieme a una demo dal vivo, clicca sul link qui sotto.
demo: Clicca qui per il lancio
Keyframes CSS: ancora non abbastanza là
Nel concetto, estrarre animazioni complesse con i CSS è sorprendentemente facile. La sintassi è semplice, flessibile e facile da imparare.
Sfortunatamente, il supporto del browser è ancora a corto di dove vorremmo che fosse e il codice necessario per l'implementazione può diventare davvero folle quando si inizia ad integrare altre proprietà CSS prefissate nel mix insieme ai keyframe.
Detto questo, è stata comunque una bella esplosione costruire e se ci sei riuscito fino in fondo sarai senza dubbio un vero professionista quando si tratta di sintassi dei keyframe!