Le animazioni in una pagina web possono attirare più utenti. Chiediti questo: se dovessi vedere una pagina web con un po 'di animazione, non vorresti esplorare di più? Ora, con le transizioni CSS puoi dare vita al tuo lavoro con alcune fantastiche animazioni. E, attenzione, questi devono essere fatti bene. Esploriamo il mondo delle transizioni CSS nel seguente ordine:
- Perché le transizioni CSS?
- La proprietà Transition
- Cosa devi specificare?
- Proprietà della funzione Transition-timing-function
- La proprietà Transition-Delay
Perché le transizioni CSS?
Facciamo un esempio. Se dovessi cambiare il colore di un elemento dal bianco al blu, questo cambiamento è quasi istantaneo. Per un effetto più animato, puoi fare in modo che questo cambiamento avvenga gradualmente. Anche questo sembra visivamente accattivante. Abilitando le transizioni CSS, puoi personalizzare il modo in cui avvengono le modifiche. È possibile definire come si verificano i cambiamenti negli elementi a intervalli di tempo specifici che seguono una curva di accelerazione.
Le transizioni CSS consentono di definire le modifiche per elementi, gli intervalli di tempo specifici, la velocità della curva di accelerazione e molto altro ancora. Puoi fare tutto questo senza usare Flash o JavaScript .
Per una migliore comprensione, puoi fare riferimento all'immagine sottostante:
Nell'immagine sopra, l'elemento HTML cambierà da rosso a blu nel giro di un secondo. Vedrai anche il colore intermedio durante la transizione. Se non intendi utilizzare le transizioni CSS, noterai che il cambiamento di colore da rosso a blu è istantaneo: non vedrai il colore intermedio. Con le transizioni CSS, noterai un effetto animato quando gli elementi HTML cambiano dal vecchio stato a quello nuovo.
La proprietà Transition
Puoi utilizzare la proprietà di transizione abbreviata per controllare le transizioni CSS. L'uso di questa scorciatoia non è solo facile, ma può anche evitare parametri non sincronizzati che possono essere piuttosto frustranti per il debug in CSS.
La proprietà di transizione specifica le proprietà CSS per le quali desideri l'effetto di transizione. Solo queste proprietà CSS sono animate.
Sintassi:
transizione:
Come principiante, potresti incontrare alcune difficoltà nell'usare la stenografia. Se pensi che l'utilizzo della scorciatoia sia un po 'complesso per te in questo momento, puoi specificare le proprietà di transizione separatamente. Per un elemento HTML, è possibile specificare le proprietà di transizione una per una come mostrato nell'esempio seguente:
div {larghezza: 100 px altezza: 100 px background: lightblue proprietà-transizione: larghezza durata-transizione: 2s funzione-tempo-transizione: ritardo-transizione lineare: 1s} div: hover {larghezza: 300px}Passa il mouse sopra la scatola
Nell'esempio sopra, abbiamo specificato le proprietà (proprietà di transizione, durata della transizione, funzione di temporizzazione della transizione e ritardo di transizione) e i loro valori separatamente. A breve impareremo a conoscere queste proprietà di transizione.
Cosa devi specificare?
Ci sono principalmente due cose che devi specificare per creare transizioni CSS: la proprietà CSS a cui vuoi aggiungere un effetto e la durata dell'effetto.Devi tenere a mente una cosa: quando non specifichi la durata, la transizione assumerà un valore predefinito di 0 e non ci sarà alcun effetto.
Consideriamo un esempio:
Il codice seguente definisce un effetto di transizione della proprietà width per una durata di cinque secondi.
div {larghezza: 100 px altezza: 100 px sfondo: blu transizione: larghezza 5 s} div: hover {larghezza: 600 px}Spostare il cursore sull'elemento div sopra per vedere l'effetto di transizione.
Nel codice sopra, vedrai che quando passi il cursore sulla casella blu, la casella blu aumenta gradualmente la sua larghezza per una durata di cinque secondi. Noterai anche che quando rimuovi il cursore dalla casella blu, la casella blu tornerà alla sua dimensione originale gradualmente (non istantaneamente). Puoi anche modificare i valori di larghezza e durata per vedere come questa proprietà di transizione influisce sull'elemento HTML.
come trasformare un double in un int
Puoi anche aggiungere l'effetto di transizione a più di una proprietà. Puoi farlo usando le virgole per separare le proprietà. Consideriamo un esempio:
differenza tra ricerca connessa e non connessa
Nel codice seguente, la proprietà di transizione è specificata per larghezza, altezza e trasformazione.
div {padding: 15px width: 150px height: 100px background: green transition: width 2s, height 2s, transform 2s} div: hover {width: 300px height: 200px transform: rotate (360deg)} Ciao mondo (Passa sopra di me)
Con l'esempio sopra, vedrai come si muove la casella verde quando passi con il mouse sopra la casella.
Abbiamo specificato solo la proprietà e la durata. Vediamo gli altri parametri con vari esempi.
Proprietà della funzione Transition-timing-function
Questa proprietà definisce la curva di velocità per l'effetto di transizione. Può assumere i seguenti valori:
- Valore di facilità: Questo è il valore predefinito in cui l'effetto è lento all'inizio, quindi più veloce e termina lentamente.
- Valore lineare: Questo effetto non varia la velocità della transizione, ma mantiene la velocità costante dall'inizio alla fine.
- Valore di facile accesso: Questo effetto inizia lentamente.
- Valore di facilità di uscita: Questo effetto ha una fine lenta.
- Valore Ease-in-out: Questo effetto ha un inizio lento e anche una fine lenta.
- Valore cubico di bezier (n, n, n, n): È possibile specificare il proprio insieme di valori nella funzione cubic-bezier.
Il codice riportato di seguito mostra gli effetti di transizione per i valori Linear, Easy, Age-In, Easy-Out e Easy-In-Out.
div {larghezza: 100 px altezza: 100 px sfondo: rosa transizione: larghezza 2 s} # div1 {funzione di temporizzazione transizione: lineare} # div2 {funzione di temporizzazione transizione: facilità} # div3 {funzione di temporizzazione transizione: facilità } # div4 {transit-timing-function: ease-out} # div5 {transit-timing-function: ease-in-out} div: hover {width: 300px}Passa il mouse sugli elementi div di seguito
lineare
facilità
facilità
disinvoltura
facilità in uscita
La proprietà Transition-Delay
A volte, desideri che un'animazione si verifichi dopo un certo periodo di tempo. La proprietà Transizione-ritardo consente di specificare il ritardo per un effetto di transizione. È possibile specificare il ritardo in secondi.
Facciamo un esempio per vedere il ritardo nell'effetto di transizione:
div {larghezza: 100 px altezza: 100 px sfondo: giallo transizione: larghezza 3 s transizione-ritardo: 1 s} div: hover {larghezza: 300 px}Passa il mouse sopra l'elemento div di seguito
Nota: Puoi osservare quel ritardo di 1 secondo prima dell'inizio dell'effetto
Nel codice sopra, quando passi con il cursore sopra la casella gialla, noterai (per un secondo) che non c'è alcun effetto. Dopo un'attesa di un secondo, noterai l'effetto.
Con questo, arriviamo alla fine di questo articolo CSS Transitions. Ora puoi aggiungere animazioni alle tue pagine web. Prova questi esempi.
Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Hai domande per noi? Per favore, menzionalo nella sezione commenti del blog 'CSS Transition' e ti risponderemo.