Transizioni di più proprietà
Applichi transizioni simultaneamente a più proprietà CSS usando valori separati da virgole.
Transizioni di più proprietà è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Perché usare transizioni per più proprietà?
Le interazioni reali delle interfacce spesso coinvolgono il cambiamento simultaneo di diverse proprietà, come il colore di sfondo, l'ombra e la scala al passaggio del cursore. CSS supporta easing e durate indipendenti per ogni proprietà.
Transizioni separate da virgole
Elenchi più transizioni separate da una virgola. Ogni voce si applica in modo indipendente a una proprietà:
<div class="card">Card</div>Durate diverse per ogni proprietà
Assegni a ogni proprietà una velocità diversa per ottenere un effetto stratificato e naturale:
<button class="btn">Hover-ready button</button>Funzioni di easing diverse per ogni proprietà
Combini funzioni di easing diverse per rendere appropriata la sensazione prodotta da ciascuna proprietà:
<div class="modal">Modal content</div>Svantaggi di transition: all
L'utilizzo di transition: all fa sì che ogni proprietà modificata utilizzi la stessa temporizzazione. Ciò può causare animazioni indesiderate per proprietà che dovrebbero cambiare istantaneamente, come display o le modifiche di posizione.
Transizioni interrompibili
Le transizioni CSS possono essere interrotte. Se lo stato hover termina durante una transizione, questa si inverte a partire dal valore animato corrente, non dallo stato finale. In questo modo si ottengono inversioni fluide senza bruschi salti.
Coordinare entrata e uscita
Utilizzi durate diverse per l'entrata e l'uscita dal passaggio del cursore sovrascrivendo le transizioni nello stato :hover:
<div class="card demo-active">Card</div>Rivelazione sfalsata con delay
Aggiunga ritardi crescenti agli elementi fratelli per ottenere un effetto di rivelazione sfalsata:
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>Proprietà personalizzate CSS per lo sfalsamento
Assegni il ritardo dello sfalsamento tramite una proprietà personalizzata CSS impostata da JavaScript o HTML:
<div class="item">Item</div>Transizione e animazione
Utilizzi le transizioni per cambiamenti a due stati (inattivo → hover). Utilizzi le animazioni @keyframes per sequenze a più passaggi, effetti ciclici o animazioni avviate automaticamente.
Ottimizzazione con will-change
Indichi al browser quali proprietà verranno animate, così da consentirne la pre-ottimizzazione. Utilizzi questa tecnica con parsimonia: consuma memoria GPU.
<div class="card">Card</div>Verifica rapida
Una card ha transition: background 150ms, transform 250ms nello stato di base. Quando il cursore si trova sopra la card, che cosa accade se l'utente lo allontana rapidamente durante l'animazione?
Riepilogo
Le transizioni separate da virgole consentono di assegnare a ogni proprietà una propria durata, funzione di temporizzazione e ritardo. Eviti transition: all: può animare proprietà indesiderate. Le transizioni possono essere interrotte e si invertono senza scatti dalla posizione corrente. Utilizzi i ritardi per creare effetti sfalsati.
Domande Frequenti
La lezione «Transizioni di più proprietà» è gratuita?
Sì — il testo completo di «Transizioni di più proprietà» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Transizioni di più proprietà»?
Applichi transizioni simultaneamente a più proprietà CSS usando valori separati da virgole. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Transizioni di più proprietà»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Durata e temporizzazione della proprietà transition
- Funzioni di easing: ease, linear, cubic-bezier
- Transizioni di più proprietà
- Prestazioni: proprietà trasformabili e soggette a repaint