"transizione"È una proprietà CSS che definisce il metodo più semplice per controllare la velocità dell'animazione quando il valore CSS cambia da un valore a un altro. La transizione può essere implementata sul CSS "Schermo" proprietà. La proprietà del display viene utilizzata per controllare il layout di un elemento, tra cui layout di flusso, griglia, flex e molti altri.

Questo post esaminerà come applicare le transizioni utilizzando la proprietà di visualizzazione CSS.

Come applicare le transizioni sulla proprietà "display" CSS?

Gli utenti non possono applicare transizioni direttamente sul CSS "Schermo" proprietà. Tuttavia, esiste un modo alternativo per applicare transizioni sulla proprietà del display. A tale scopo, passare attraverso la procedura di seguito.

Passaggio 1: crea un contenitore ""

Innanzitutto, crea un contenitore div usando il ""Tag insieme alla classe assegnata con un valore specifico.

Passaggio 2: aggiungi una voce

Successivamente, inserire un'intestazione utilizzando qualsiasi "

" A "

"Tag. Ad esempio, "

"Aggiunge un'intestazione.

Passaggio 3: aggiungere dati all'elenco

Al fine di inserire i dati sotto forma di un elenco, utilizzare il "

"Tag:

Elenco di animali domestici

Gallina

Anatra

Cane

Gatto

Coniglio

L'output del codice sopra menzionato è il seguente:

Ora, vai avanti verso la sezione CSS per lo styling dell'elenco.

Passaggio 4: stile ".Elemento animale-animale "

Accedi al ""Elemento con l'aiuto della classe assegnata".animale domestico"E applica le proprietà elencate:

.Pet-Animal
Bordo: 2px punteggiato di RGB (230, 15, 15);
Margine: 50px;
Background-color: RGB (252, 239, 169);

Qui:

• "confine"La proprietà viene utilizzata per specificare il limite attorno all'elemento.
• "margine"Definisce lo spazio attorno al limite dell'elemento.
• "colore di sfondo"Assegna un colore sul retro dell'elemento.

L'immagine risultante mostra l'output del codice sopra:

Passaggio 5: Stile Elenco aggiunto "Li"

Ora, accedi all'elenco del "div"Container con classe"animale domestico"Usando".animale domestico> li"E applica le proprietà di seguito:

.PET-INIMAL> li
Visibilità: nascosto;
opacità: 0.2;
Transizione: visibilità 0s, opacità 0.5S lineare;

Qui:

• IL "visibilità"CSS viene utilizzato per impostare la visibilità dell'elemento senza modificare il layout di un documento, come nascosto o visibile.
• "opacità"Specifica la trasparenza di un elemento.
• "transizione"Consente agli utenti di modificare i valori delle proprietà senza problemi per una determinata durata:

Passaggio 6: applicare la classe pseudo "hover"

Ora, applica il "molare"Proprietà nell'elenco:

.Pet-Animal: Hover> li
Visibilità: visibile;
opacità: 1;

IL ": Hover"CSS è una classe pseudo che apporta modifiche al tempo di esecuzione quando il puntatore del mouse viene spostato sull'elemento. Rendere visibile un elenco usando "visibilità"E imposta la trasparenza usando il"opacità"Proprietà CSS all'elenco su Hover:

Si può osservare che abbiamo applicato con successo la transizione sul "Schermo" proprietà.

Conclusione

La transizione CSS non può essere applicata direttamente al "Schermo" proprietà. Tuttavia, può essere applicato in modo alternativo. Per fare ciò, aggiungi il tag elenco sul documento HTML, accedi all'elenco per nome del tag e applica "transizione","opacità", E "visibilità"Proprietà CSS nell'elenco. Quindi, utilizza il ": Hover"Pseudo-Classe e imposta il valore di visibilità come"visibile". Questo post ha spiegato come la transizione viene applicata alla proprietà del display CSS.