Finiamo la settimana con qualcosa di divertente dovremmo? Le animazioni dei fotogrammi chiave CSS attualmente hanno un supporto browser molto limitato, ma sono comunque abbastanza interessanti da apprendere e sperimentare.
Di seguito creiamo una semplice pagina Web che sfrutta le animazioni dei fotogrammi chiave di Webkit per spostare delicatamente il colore di sfondo su un loop infinito. Incuriosito? Continuare a leggere!
dimostrazione
Per dare un'occhiata a quello che costruiremo oggi, clicca sul link qui sotto.
Dimostrazione dal vivo: Clicca qui
Animazioni di fotogrammi chiave: ancora solo per divertimento
Con CSS3, è abbastanza facile avere un colore sfumato in un altro, ad esempio su un comando di passaggio del mouse. Imposta due colori diversi, lancia una transizione e sei pronto per partire. Ma cosa succede se vogliamo avere qualcosa che cambia continuamente i colori? La risposta sta nei keyframe.
Attualmente, il supporto per le animazioni dei fotogrammi chiave nei CSS è piuttosto basso. In effetti, si può solo contare su di esso lavorando su browser Webkit come Safari e Chrome (Firefox 5 dovrebbe vedere anche il supporto). Quindi, la parte sfortunata è che, come con molti trucchi CSS3, questo non è ancora pronto per l'uso in produzione a meno che non siate pienamente preparati per un gran numero di utenti che perdono l'esperienza.
Come funzionano i fotogrammi chiave
Le animazioni dei fotogrammi chiave sono una delle nuove funzionalità più complicate dei CSS. In effetti, sembra un po 'più simile alla programmazione che allo styling, fino al punto di farlo quasi dichiarando una variabile! Facciamo una prova veloce e sporca per vedere come funzionano.
La prima cosa che vuoi fare è dichiarare il blocco del fotogramma chiave del webkit e nominare la tua animazione.
Come ho accennato sopra, il nome dell'animazione è quasi come una variabile che chiamerai in seguito, quindi assicurati che sia descrittivo e facile da ricordare. Ad esempio, per il nostro esperimento, potremmo usare il nome? ColorPulse ?.
Successivamente, riempiamo questo con una specie di linea temporale per la nostra animazione. Pensa che è come dichiarare i fotogrammi chiave proprio come faresti in un programma di animazione, solo che qui stai usando puro codice. Le percentuali rappresentano lo stato dell'oggetto in quel punto dell'animazione.
Qui stiamo ovviamente animando la proprietà background-color. A 0% il colore sarebbe rosso, al 50% sarebbe bianco e al 100% sarebbe blu. Tutto l'interpolazione viene eseguita automaticamente, quindi tutto ciò che rimane è applicare l'animazione a un elemento specifico e definire il comportamento. Qui lo applichiamo a un div.
Come puoi vedere, abbiamo usato il nome dell'animazione, questo è indirizzato alle cose che abbiamo creato prima. Successivamente, impostiamo la durata (10 secondi), il numero di iterazioni (infinito) e la direzione (alternativa). Quest'ultimo farà sì che l'animazione vada avanti e indietro: rosso, bianco, blu, bianco, rosso, bianco, blu, ecc.
Questo è davvero solo l'abbreviazione di queste dichiarazioni. Puoi anche impostarli uno alla volta. Ecco un elenco più ampio delle proprietà di animazione che puoi definire:
Sfondo del sito web pulsante
Ora che abbiamo un'idea di come funziona, andiamo oltre, costruendo un esempio reale. Inizieremo disegnando un disegno di pagina di base e quindi termineremo aggiungendo la nostra animazione.
Colore di sfondo
Per progettare la pagina, dobbiamo scegliere un colore di sfondo. Questo è un compito interessante considerando il progetto. Il nostro obiettivo è creare uno sfondo che pulsa da un colore all'altro. Non posso sottolineare abbastanza quanto questo sia pericoloso dal punto di vista di un designer. Sei quasi condannato a creare qualcosa di così brutto che nessuno può guardarlo!
Il modo migliore in cui possiamo avvicinarci è da una posizione di sottigliezza. Vogliamo turni lenti e regolari che siano gradevoli e non stridenti. Se selezioniamo colori troppo audaci o brillanti, bruceremo gli occhi degli spettatori.
Da quando abbiamo appena passato Easer, la mia mente è rimasta intrappolata nei pastelli e mi è venuto in mente che una tale tavolozza potrebbe essere perfetta per questo progetto. Ho licenziato Kuler, cercato? Pastello? e ha trovato la seguente palette.
Questi sono i colori che useremo per il nostro background. Se combinato con uno spostamento molto lento, dovrebbe darci un effetto piuttosto lieve e attraente.
HTML di base
Per gettare le basi del nostro esperimento, ho creato il mio tipico cliché? layout di web design: un'intestazione, sottotitoli e un'immagine. Non abbiamo davvero bisogno di molto, quanto basta per rendere la pagina non incredibilmente noiosa.
Come puoi vedere, inseriamo intervalli a 0%, 25%, 50%, 75% e 100% in modo che la nostra animazione sia ben suddivisa.Ad ogni fermata abbiamo inserito un colore dalla nostra tavolozza di Kuler.
Successivamente, oltre all'applicazione di un colore di sfondo standard, che servirà da backup, abbiamo dichiarato l'animazione. Notare che l'ho impostato su un enorme 40s. Ancora una volta, poiché questo ha tanto potenziale per essere un'animazione intensa, vogliamo che sia molto lento. In effetti, mi piace anche come appare con il tempo impostato per raddoppiarlo.
Prodotto finito
E ancora una volta, nel caso lo avessi perso sopra, ecco il prodotto finito. Nota come sono belle le transizioni da colore a colore. Da quando abbiamo iniziato con una bella tavolozza, i cambiamenti sono abbastanza naturali e non troppo fastidiosi.
Dimostrazione dal vivo: Clicca qui
Conclusione
Nei prossimi anni inizierai a vedere sempre più supporto per le animazioni dei fotogrammi chiave CSS. In questo momento lavorano alla grande in Safari e Chrome, che rappresentano costantemente uno sguardo al futuro di HTML e CSS e sono in linea per lavorare con Firefox come @ -moz-fotogrammi chiave.
Lo scopo di questo articolo era quello di farti pensare a tutte le animazioni non tradizionali che puoi creare con le animazioni dei fotogrammi chiave. Spero che tu abbia imparato una cosa o due e sia stato ispirato a creare le tue applicazioni uniche.