Transizioni in CSS

Per rendere accattivante il tuo web design devi aggiungere alcune animazioni ai tuoi contenuti. Per gestire il comportamento di queste animazioni, vengono utilizzate le transizioni CSS. Le transizioni sono indicate come uno spostamento nello stato di un elemento senza intoppi in una durata specificata. Pertanto, quando si applica gli effetti di transizione su vari elementi CSS è necessario indicare la proprietà CSS su cui verrà applicato l'effetto e il tempo dell'effetto. Specificare la durata è molto importante o altrimenti, non vi sarà alcun effetto di transizione sul particolare elemento.

Ci sono alcune proprietà di transizione CSS che vengono utilizzate per aggiungere effetti di transizione su vari elementi, le abbiamo spiegate in dettaglio di seguito.

Proprietà di transizione CSS

CSS fornisce varie proprietà di transizione che sono le seguenti.

1. Proprietà di transizione
2. durata della transizione
3. Transition-Delay
4. Funzione di transizione
5. transizione

Tutte le proprietà sopra menzionate sono spiegate di seguito.

Proprietà di transizione

Questa proprietà viene utilizzata per specificare varie proprietà CSS a cui dovrebbe essere applicato l'effetto di transizione.

Sintassi

Proprietà di transizione: nessuna | tutto | Proprietà | Eredità | iniziale;

Tutto il valore è un valore predefinito che applica l'effetto di transizione a tutte le proprietà specificate, mentre il valore della proprietà specifica il nome della proprietà su cui verrà applicato l'effetto.

Esempio
Supponiamo di voler modificare la larghezza e l'altezza di un contenitore di div usando la proprietà di transizione.

Html

Porta il mouse su di me

Stiamo semplicemente definendo un contenitore div.

CSS

div
larghezza: 100px;
Altezza: 90px;
Sfondo: rosa;
Proprietà di transizione: larghezza, altezza;
Durata di transizione: 2s;

div: hover
larghezza: 250px;
Altezza: 250px;

Stiamo impostando la larghezza originale del div su 100px e l'altezza su 90px, quindi stiamo applicando un effetto di transizione sia sulla larghezza che sull'altezza di div per 2 secondi. Specificare la durata è un must altrimenti la transizione non si applicherà. Inoltre, l'effetto di transizione si verificherà quando l'utente porta il mouse sul contenitore Div.

Produzione

Un effetto di transizione è stato implementato con successo sul contenitore DIV.

durata della transizione

Questa proprietà specifica per quanto tempo dovrebbe verificarsi l'effetto di transizione. Ogni proprietà può essere data una sola durata o è possibile assegnare diverse durate a varie proprietà CSS.

Sintassi

Durata del tempo: tempo | Eredità | iniziale;

Il parametro del tempo specifica la durata dell'effetto di transizione.

Esempio
Supponiamo di voler aumentare le dimensioni del carattere e il peso di un paragrafo quando un cursore del topo viene portato su di esso.

Html

Porta il mouse su di me

Abbiamo definito il nostro paragrafo.

CSS

P
Font-size: 20px;
Transition Property: Font-Size;
Durata di transizione: 3s;

p: hover
Font-size: 50px;

Il codice sopra specifica che quando il cursore del mouse viene portato nel paragrafo, la dimensione del carattere del paragrafo cambierà e questo effetto si verificherà per 3 secondi.

Produzione

La proprietà della durata di transizione funziona correttamente.

Transition-Delay

Questa proprietà specifica il ritardo tra una modifica in una proprietà e l'inizio dell'effetto di transizione.

Sintassi

Durata del tempo: tempo | Eredità | iniziale;

Il parametro del tempo specifica la durata dell'attesa prima dell'inizio dell'effetto di transizione.

Esempio
Supponiamo di voler applicare un effetto di transizione su un elemento div dopo un ritardo di 2 secondi, segui l'esempio seguente.

Html

Porta il mouse su di me

Nel codice sopra, abbiamo semplicemente creato un contenitore div.

CSS

div
Altezza: 100px;
larghezza: 100px;
Background-color: Pink;
Transition Property: altezza;
Durata di transizione: 3s;
Transition-Delay: 2s;

div: hover
Altezza: 200px;

Secondo il pezzo di codice sopra, l'effetto di transizione si verificherà dopo il ritardo di 2 secondi.

Produzione

Questo è un effetto di transizione con un ritardo di 2 secondi.

Funzione di transizione

Questa proprietà viene utilizzata per definire la curva di accelerazione dell'effetto di transizione.

Sintassi

Funzione di transizione: facilità | lineare | facilità in | facilitare | facilità in out | Cubic-Bezier (n, n, n, n);

Tutti i parametri sono spiegati di seguito.

• sollievo: L'effetto di transizione si verifica in modo lento lento.
• lineare: L'effetto di transizione avrà la stessa velocità dall'inizio alla fine.
• facilità in: L'effetto di transizione avrà un inizio lento.
• facilitare: L'effetto di transizione avrà un finale lento.
• facilità in out: L'effetto di transizione avrà un inizio lento e una fine lenta.
• Cubic-Bezier (N, N, N, N): I valori dell'effetto di transizione saranno impostati in modo cubico.

Esempio
Considera l'esempio di seguito.

Html

Porta il mouse su di me

È stato semplicemente creato un contenitore di div.

CSS

div
Altezza: 100px;
larghezza: 100px;
Background-color: Pink;
Proprietà di transizione: larghezza;
Durata di transizione: 2s;
Funzione di transizione: lineare;

div: hover
larghezza: 200px;

Secondo il codice sopra, la larghezza del contenitore di div cambierà in modo lineare, il che significa che l'effetto di transizione avrà la stessa velocità dall'inizio alla fine.

Produzione

L'effetto di transizione sta avvenendo in modo lineare.

transizione

Questa proprietà è una proprietà stentata che viene utilizzata per impostare i valori su tutte le proprietà di transizione sopra.

Sintassi

transizione: (proprietà) (durata) (funzionalità temporale) (ritardo);

Esempio
L'esempio seguente dimostra il funzionamento della proprietà di transizione.

CSS

div
Altezza: 100px;
larghezza: 100px;
Background-color: LightsEagreen;
transizione: larghezza 0.5s lineare 1s;

div: hover
larghezza: 200px;

Usando la proprietà di transizione stiamo applicando un effetto di transizione sulla larghezza per 0.5 sec in modo lineare con un ritardo di 1 sec.

Produzione

La proprietà di transizione funziona correttamente.

Conclusione

Le transizioni sono indicate come uno spostamento nello stato di un elemento senza intoppi in una durata specificata. CSS fornisce varie proprietà di transizione che sono le seguenti: Properità di transizione, durata della transizione, decasso di transizione, funzionalità di transizione e transizione. Tutte queste proprietà vengono utilizzate per specificare il comportamento dell'effetto di transizione applicato su vari elementi HTML. In questa guida, tutte queste proprietà sono spiegate con l'aiuto di esempi pertinenti.