Transizioni: proprietà, durata e temporizzazione
Aggiungere transition per animare con fluidità le modifiche alle proprietà CSS, scegliere durate appropriate e selezionare funzioni di easing come ease-in-out.
Transizioni: proprietà, durata e temporizzazione è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Che cos'è una transizione CSS?
Una transizione CSS anima una proprietà da un valore a un altro quando cambia (al passaggio del mouse, quando l'elemento riceve il focus o quando viene attivata una classe). È dichiarativa: indica a CSS quali proprietà sottoporre a transizione e come; il browser fa il resto.
Sintassi di base
transition: property duration timing-function delay. Può elencare più transizioni separate da virgole.
.btn {
background: #6366f1;
transition: background-color 0.2s ease;
}
.btn:hover {
background: #4f46e5;
}
// Browser smoothly animates the colour changeIl valore della proprietà
Specifichi quali proprietà sottoporre a transizione. Utilizzi all per applicare la transizione a ogni proprietà animabile, ma questo può attivare transizioni indesiderate su proprietà non correlate. Indichi esplicitamente le proprietà per ottenere prestazioni e comportamento prevedibili.
.card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.15s linear;
}
/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }Durata — Quanto dura
Indichi la durata della transizione in s (secondi) o ms (millisecondi). Utilizzi durate brevi (100–200 ms) per le micro-interazioni, medie (200–400 ms) per i cambiamenti di stato dei componenti e più lunghe (400 ms o più) per le animazioni a livello di pagina.
Funzioni di temporizzazione — La sensazione
Le funzioni di temporizzazione controllano la curva di accelerazione. Valori comuni: ease (predefinito: inizio lento, parte centrale veloce, fine lenta), linear (velocità costante), ease-in (inizia lentamente), ease-out (termina lentamente), ease-in-out. Curve personalizzate: cubic-bezier(x1, y1, x2, y2).
.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }Ritardo — Quando iniziare
Un ritardo della transizione avvia l’animazione dopo un intervallo specificato. Utilizzatelo per sfalsare più elementi o per evitare attivazioni accidentali al passaggio del mouse quando il cursore si muove rapidamente.
.dropdown-menu {
opacity: 0;
transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
opacity: 1;
}Evento transitionend
JavaScript può rilevare quando una transizione termina tramite l’evento transitionend. È utile per rimuovere elementi dopo una dissolvenza o per attivare il passaggio successivo di una sequenza.
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && element.style.opacity === '0') {
element.remove();
}
});Trasformare gli elementi
La proprietà transform è accelerata dalla GPU ed è ideale per le transizioni. Trasformazioni comuni: translate(), scale(), rotate(), skew(). Animare transform e opacity attiva solo il compositing: è il percorso più veloce.
.card {
transform: translateY(0) scale(1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}Quali proprietà possono essere animate
Qualsiasi proprietà con un valore numerico può essere sottoposta a transizione: opacity, colour, transform, width, height, padding, border, font-size. Proprietà come display e visibility non effettuano transizioni fluide: utilizzate invece opacity per ottenere una dissolvenza in entrata o in uscita.
Esercizio pratico: dissolvenza in entrata di una finestra modale
Una finestra modale che compare gradualmente e si ingrandisce partendo da dimensioni leggermente ridotte. Applicate la classe .open con JavaScript; al CSS spetta gestire l’animazione.
.modal {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.modal.open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}Prestazioni: attenersi a transform e opacity
Animare proprietà che attivano il layout (width, height, margin, top, left) è costoso: il browser ricalcola il layout a ogni fotogramma. Attenetevi a transform e opacity per ottenere animazioni fluide a 60 fps.
Verifica rapida
Quale proprietà CSS è preferibile animare per ottenere le migliori prestazioni?
Riepilogo: transizioni CSS
transition: property duration timing delay. Animate proprietà specifiche, non 'all'. ease, ease-out, ease-in-out per un movimento naturale. Ascoltate l’evento transitionend per concatenare le azioni. Attenetevi a transform e opacity per ottenere buone prestazioni. Utilizzate cambi di classe in JS per attivare le transizioni.
Domande Frequenti
La lezione «Transizioni: proprietà, durata e temporizzazione» è gratuita?
Sì — il testo completo di «Transizioni: proprietà, durata e temporizzazione» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Transizioni: proprietà, durata e temporizzazione»?
Aggiungere transition per animare con fluidità le modifiche alle proprietà CSS, scegliere durate appropriate e selezionare funzioni di easing come ease-in-out. Eserciti Frontend 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 Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend 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 2 di 4.
Quanto tempo richiede la lezione «Transizioni: proprietà, durata e temporizzazione»?
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 Frontend Academy?
Sì. Ogni lezione Frontend 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
- Proprietà personalizzate CSS: dichiarazione e aggiornamento
- Transizioni: proprietà, durata e temporizzazione
- Animazioni @keyframes
- Rispettare prefers-reduced-motion