Come avere più transizioni CSS su un elemento

Molte piattaforme online richiedono animazioni su alcune pagine Web per rendere l'app più accattivante. A tale scopo, gli sviluppatori utilizzano le proprietà CSS durante la progettazione delle interfacce front-end. Più specificamente, le transizioni CSS significano applicare animazioni su un elemento HTML attraverso le proprietà CSS in modo tale da applicare automaticamente le proprietà una dopo l'altra.

Questo articolo discuterà il metodo per applicare le proprietà CSS per avere più transizioni su un elemento HTML.

Come applicare più transizioni CSS su un elemento?

Tutto ciò che richiede è prima creare gli elementi in HTML su cui le transizioni devono essere applicate e quindi aggiungere l'ID CSS o i selettori di classe nell'elemento di stile per fare riferimento agli elementi HTML.

Esempio

Creiamo un elemento del contenitore Div nel corpo del codice HTML e quindi applichiamo le proprietà CSS su di esso per renderlo animato:

Passa il mouse per visualizzare le transizioni

Ciao utente!!!

Nel frammento di codice sopra:

• • UN "

    "L'intestazione viene aggiunta con il CSS in linea"margine"Proprietà impostata su"1 rem"E l'intestazione dice"Passa il mouse per visualizzare le transizioni".

  • Dopodiché, un ""L'elemento contenitore viene aggiunto con la classe dichiarata come"la mia classe".
  • IL ""L'elemento contenitore ha il testo"Ciao utente!!!" dentro. Le transizioni CSS saranno applicate a questo elemento Div.

L'elemento in stile CSS dovrebbe avere tutte le proprietà necessarie che rendono animato il Div:

.la mia classe
Font-size: 3Rem;
Margine: 2rem;
giustificare contento: centro;
display: flex;
bordo: 10px viola solido;
larghezza: 20rem;
Altezza: 9rem;
Transizione: Color 1s Eason-Out, Pagging-Top 1s Eason-Out,
Eason-out di 3s di imbottitura di imbottitura 1s;

.myclass: hover
colore blu;
bordo: 10px arancione solido;
imbottitura: 100px;
imbottitura: 40px;
Font-Size: 1.8rem;

Nell'elemento in stile CSS sopra:

• • Viene aggiunto un selettore di classe che si riferisce a "la mia classe"Elemento del contenitore Div. All'interno di esso, vari proprietà CSS sono definite per l'elemento del contenitore Div.
  • IL "dimensione del font"La proprietà imposta le dimensioni del testo scritto nel contenitore Div a"3rem".
  • IL "margine"La proprietà viene aggiunta per dare spazio a"2rem"Dopo il testo o l'intestazione.
  • IL "giustificare il contenuto"La proprietà allinea il testo del contenitore Div al centro del contenitore Div.
  • IL "display-flex"La proprietà è stata aggiunta per allineare automaticamente il contenuto nell'elemento Div correttamente.
  • IL "confine"La proprietà viene aggiunta per impostare il peso del bordo del contenitore Div come"10px"E definisce il colore del bordo come"viola".
  • IL "larghezza"La proprietà definisce la lunghezza verticale dell'elemento Div come"20rem".
  • Allo stesso modo, il "altezza"La proprietà definisce la lunghezza orizzontale dell'elemento Div come"9rem".
  • IL "transizione"La proprietà viene aggiunta per definire il tempo in cui le transizioni devono essere applicate. Per "colore","imbottitura" E "imbottitura", È stato impostato come"1 secondo" e per "dimensione del font", È stato impostato come"3 secondi".
  • Dopodiché, la Pseudo-Classe ": Hover"Viene aggiunto con il selettore della classe CSS".la mia classe"Per definire le proprietà CSS da implementare mentre l'utente si libra sull'elemento creato tramite"la mia classe".
  • IL "coloreLa proprietà "è definita come"blu"In modo che quando l'utente si libra sull'elemento, cambia immediatamente il colore del testo in blu.
  • Successivamente, il "confine"La proprietà è stata definita che cambia la dimensione del bordo in"10px"Mentre si libra e il colore per i confini è stato definito come"arancia".
  • IL "imbottitura" E "imbottitura"Le proprietà sono state aggiunte per definire rispettivamente la spaziatura tra il contenuto e i bordi dalla parte superiore e inferiore.
  • IL "dimensione del font" è definito come "8rem"Mentre si libra.

I risultati delle transizioni CSS applicate sopra saranno i seguenti:

Questo riassume il metodo per applicare più transizioni CSS su un elemento HTML.

Conclusione

Le transizioni CSS vengono applicate agli elementi HTML per farle sembrare animate. Tutto ciò che richiede per applicare le transizioni CSS sta aggiungendo l'ID o il selettore di classe nell'elemento stile CSS che si riferisce all'elemento HTML su cui le transizioni devono essere applicate e quindi aggiungendo tutte le proprietà necessarie come colore, carattere, bordi, bordi prima e dopo la transizione. Questo articolo ha guidato sull'applicazione di più transizioni CSS su un elemento HTML.