Sono un grande fan delle transizioni CSS. Certo, possono essere abusati, ma nel complesso sono un modo davvero bello e facile per aggiungere un po 'di vita alle tue pagine web. E diciamocelo, sono divertenti con cui giocare.
Ho coperto le transizioni un milione di modi diversi, ma c'è una caratteristica che non tocco quasi mai: ritardi nella transizione. Perché vorresti ritardare la tua transizione? Si scopre che gli effetti che si possono ottenere diventano molto più complessi e impressionanti quando si incorpora questo parametro extra. Facciamo un salto e costruiamo alcune fantastiche demo per mostrare come funziona.
Cosa stiamo costruendo
Se vuoi dare una sbirciatina a quello che costruiremo oggi, controlla le tre demo di seguito:
- Messaggio sequenziale
- Una lettera alla volta
- Effetto cortina
La sintassi
Prima di saltare alla costruzione di qualcosa, vale la pena aggiornarci sulla sintassi della transizione CSS. Ci sono quattro diversi parametri associati alle transizioni nel CSS: proprietà, durata, funzione di temporizzazione e ritardo.
È possibile impostare i valori per ciascuna di queste proprietà singolarmente utilizzando la sintassi di seguito. Tieni presente che vorrai eseguire questo codice tramite Prefixr per assicurarti di aver coperto i vari browser.
Sebbene questo sia il modo più semplice per dichiarare una transizione, è davvero un modo orribilmente ingombrante per affrontarlo. Quando rendiamo conto di tutti i vari prefissi richiesti, questo blocco di codice diventa enorme:
Come puoi vedere, questo è un gran numero di codice per una semplice transizione. Per questo motivo, i programmatori utilizzano tipicamente la versione abbreviata molto più concisa. Con questo metodo, possiamo prendere l'enorme quantità di codice sopra e convertirla nel seguente, molto più gestibile frammento.
La sintassi di stenografia
Per essere sicuri che siamo tutti sulla stessa pagina, ecco una descrizione visiva della stenografia della transizione.
Come puoi vedere, il metodo tradizionale è quello di elencare la proprietà su cui vuoi abilitare la transizione, seguita dalla durata della transizione, dalla funzione di andamento e infine dal ritardo. Questa sintassi non è però molto severa. Ad esempio, è possibile scambiare la posizione della funzione di andamento e il ritardo e la transizione continuerà a funzionare. Tuttavia, l'ordine mostrato sopra è dalle specifiche ufficiali quindi consiglio di attenersi ad esso.
Una cosa che faccio spesso però è semplicemente lasciare la proprietà del delay. Il valore predefinito è zero secondi, quindi nel caso in cui non si voglia ritardare, è sufficiente scrivere quanto segue:
Il potere dei ritardi di transizione
Ora che comprendiamo la sintassi dietro le transizioni, parliamo del perché nel mondo vorresti un ritardo in una transizione. Ci possono essere diversi motivi per cui potresti voler usare questa proprietà, ma quella su cui mi concentrerò oggi è realizzare animazioni complesse che coinvolgono più passaggi. Abbiamo giocato con più transizioni di step un po 'negli articoli precedenti, ma oggi ci divertiremo davvero.
Fondamentalmente, il concetto qui è che si attivano due o più transizioni su un evento, ma si usano ritardi per farle accadere in momenti diversi. Quindi diciamo che la nostra prima transizione è destinata a durare per un secondo, quindi possiamo impostare un ritardo di un secondo sulla nostra seconda transizione per farlo iniziare non appena finisce il primo. I risultati possono essere piuttosto impressionanti!
Messaggio sequenziale
La prima idea che mi viene in mente per l'utilizzo dei ritardi consiste nell'impostare una sorta di messaggio che si presenta all'utente un pezzo alla volta. Diciamo che vogliamo avere tre pezzi di testo che volano dentro e fuori da un div in momenti diversi. Il primo passo è quello di illustrare come funziona tutto così puoi avvolgerti nei pensieri.
- Messaggio predefinito: passa il mouse qui?
- Un secondo vola fuori? Passa il mouse qui?
- Aspetta un secondo, poi vola nel secondo messaggio:? Saluti !?
- Aspetta due secondi, poi vola nel terzo messaggio:? Come stai ??
- Passa il mouse al messaggio predefinito
Come puoi vedere, prima chiediamo all'utente di passare con il mouse sopra il div, quindi far uscire il messaggio al passaggio del mouse quando arrivano altri due messaggi, il primo dei quali attenderà un secondo e il secondo attenderà due secondi.
HTML
Per dare vita a questa demo, abbiamo bisogno di un div che contenga tre paragrafi diversi come questo. Ovviamente, se stavi usando questo è un progetto dal vivo, vorresti applicare una classe o un ID, ma lo terrò qui semplice.
CSS
Per avviare il CSS, modificheremo il div e i paragrafi. Ci sono alcune cose importanti da considerare.Prima di tutto, notate il posizionamento relativo e l'overflow nascosto sul div, questi sono importanti quindi assicuratevi di includerli.
Successivamente, si noti che ho posizionato in modo assoluto gli elementi di testo e li ho spostati verso l'alto e fuori dai limiti del div in modo che non siano visibili per impostazione predefinita. Ho anche incluso un fantastico effetto Sass 3D completamente opzionale. Per il mixin completo, controlla questo articolo.
Ora è il momento di mettere in atto il nostro primo paragrafo e creare la nostra prima transizione. Per fare ciò, utilizzeremo il selettore nth-child per indirizzare il primo paragrafo (? Hover Here?). Posizionalo a cinquanta pixel dall'alto, aggiungi una transizione di un secondo senza ritardi e crea un effetto di passaggio del mouse che lo ingrandisce.
Per completare questa demo, è necessario creare un evento hover per il secondo e il terzo paragrafo. Sono fondamentalmente uguali, basta assicurarsi che i? Saluti? il paragrafo ha un ritardo di un secondo e il? Come stai ?? il paragrafo ha un ritardo di due secondi. Assicurati anche di posizionare l'ultimo paragrafo più in basso.
Dimostrazione dal vivo
Questo è tutto ciò che c'è da fare! Ora diamo un'occhiata alla demo live su Tinkerbin. Qui sarai in grado di vedere e modificare il codice, assicurati di giocare e vedere cosa puoi inventare!
demo: Clicca qui per il lancio. Nota che dovrai cambiare la modalità CSS in? Sass? e colpisci? corri? per vedere l'effetto del testo 3D.
Una lettera alla volta
Per questo, useremo solo un singolo messaggio. Tuttavia, ogni lettera del messaggio arriverà a volare individualmente. Il risultato sarà davvero interessante e molto diverso da quello che si vede tradizionalmente con i CSS.
HTML
Sfortunatamente, i CSS non hanno un ottimo modo per indirizzare le singole lettere in una stringa (ancora), quindi il nostro HTML deve essere completamente disordinato con le span. È un dolore e il codice sembra un po 'trascurato, ma è il meglio che possiamo fare senza introdurre JavaScript nell'immagine, che è fuori dallo scopo di questo tutorial.
CSS
Il nostro primo blocco di CSS creerà il nostro div, proprio come l'ultima volta, e modificherà le lettere. Sto utilizzando il carattere Web di Google? Bree Serif ?. Ho anche impostato l'opacità su 0, la posizione su assoluto e trasformato il testo in maiuscolo.
Ora dobbiamo applicare una transizione diversa a ogni singola lettera. Per fare ciò, usa l'ennesimo bambino proprio come l'ultima volta e prendi di mira gli span. Si noti come la differenza principale qui sia che il ritardo si riduce ogni volta, a partire da 0.4 secondi e fino a 0.
Per finire questo, dobbiamo prima dichiarare cosa succede quando passiamo il mouse sopra il div. Ho impostato gli span per avere un'opacità pari a 1, li ho inseriti da sinistra e li ho ruotati di 360 gradi in modo che ruotino in posizione.
Da qui, tutto ciò che rimane è quello di spingere ogni singola lettera in posizione al passaggio del mouse. Una volta terminato, un singolo evento di hover farà sì che tutte le lettere diventino visibili e girino in posizione ei nostri ritardi garantiranno che tutto ciò avvenga in sequenza.
Dimostrazione dal vivo
Con quello, siamo tutti finiti. Assicurati di fermarti alla demo qui sotto e passa il mouse sopra il div per vedere l'animazione e modificarla per i tuoi usi.
demo: Clicca qui per il lancio.
Effetto cortina
Ormai capisci come funziona tutto, quindi non ti annoierò con ulteriori spiegazioni, ma mi è venuta in mente un'altra demo che pensavo fosse divertente. Questo usa una pila di immagini che gradualmente cadono per rivelare l'immagine finale sul fondo della pila. È un effetto sipario sfalsato che è decisamente molto più di quanto ti aspetteresti di ottenere in un singolo evento hover CSS.
demo: Clicca qui per il lancio.
Come si usano i ritardi di transizione?
Ora che hai visto alcune delle idee che ho avuto per utilizzare in modo creativo i ritardi di transizione, mi piacerebbe vedere cosa ti è venuto in mente. Lascia un link qui sotto e mostrami cosa hai!