Durata e temporizzazione della proprietà transition
Definisca quali proprietà animare, quanto devono durare le transizioni e quando devono iniziare tramite delay.
Durata e temporizzazione della proprietà transition è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Che cos'è una transizione CSS?
Una transizione CSS interpola tra due valori di una proprietà nell'arco di una durata specificata quando il valore cambia, ad esempio al passaggio del cursore. Non è necessario alcun JavaScript.
transition-property
Specifica quali proprietà CSS animare. Utilizzi all per applicare la transizione a ogni proprietà animabile oppure elenchi proprietà specifiche.
<button>Save changes</button>transition-duration
Imposta la durata della transizione. Accetta valori temporali espressi in secondi (s) o millisecondi (ms).
<div class="card">Card</div>La forma abbreviata transition
Combina tutte e quattro le proprietà secondarie delle transizioni: property | duration | timing-function | delay.
<button class="btn">Submit</button>Transizioni multiple
Elencare più transizioni separate da virgole consente di animare proprietà diverse in modo indipendente:
<div class="card">Card</div>transition-delay
Ritarda l'inizio della transizione. È utile per concatenare le animazioni o per lasciare che una transizione termini prima che ne inizi un'altra.
<nav>
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Contact</a>
</nav>Transizione nello stato di base
Inserisca sempre la proprietà transition nello stato di base, non nello stato :hover. In questo modo la transizione viene eseguita sia quando il cursore entra sia quando esce dall'elemento.
<button class="btn demo-active">Hover me</button>Che cosa può essere sottoposto a transizione?
La maggior parte delle proprietà CSS numeriche può essere sottoposta a transizione: colori, dimensioni, opacità, trasformazioni e così via. Le proprietà discrete, come display, non possono essere interpolate in modo fluido: cambiano istantaneamente.
Avvertenza su transition: all
L'utilizzo di transition: all può causare animazioni impreviste su proprietà che non si intende animare. Nel codice di produzione, specifichi sempre proprietà esplicite.
Transizioni dei colori
Le transizioni dei colori interpolano tra i diversi valori. Per ottenere i risultati migliori, utilizzi lo stesso formato di colore:
<button class="btn demo-active">Hover me</button>Transizioni e layout thrashing
Per motivi di prestazioni, eviti di applicare transizioni a proprietà che attivano il layout, come width, height, margin e padding. Queste causano il ricalcolo del layout a ogni fotogramma dell'animazione. Utilizzi invece transform e opacity.
Verifica rapida
Dove deve essere posizionata la proprietà transition per garantire che venga eseguita sia quando il cursore entra sia quando esce dall'elemento?
Riepilogo
Le transizioni CSS rendono graduali nel tempo i cambiamenti delle proprietà utilizzando transition-property, duration, timing-function e delay. Inserisca le transizioni nello stato di base per ottenere un'animazione bidirezionale. Per prestazioni e prevedibilità, preferisca elenchi di proprietà specifiche a all.
Impara CSS con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 40
- Lezioni
- 159
Domande Frequenti
La lezione «Durata e temporizzazione della proprietà transition» è gratuita?
Sì — il testo completo di «Durata e temporizzazione della proprietà transition» è 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 «Durata e temporizzazione della proprietà transition»?
Definisca quali proprietà animare, quanto devono durare le transizioni e quando devono iniziare tramite delay. 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 1 di 4.
Quanto tempo richiede la lezione «Durata e temporizzazione della proprietà transition»?
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