Concatenare e mettere in sequenza le animazioni
Crei sequenze complesse concatenando più animazioni con ritardi sfalsati.
Concatenare e mettere in sequenza le animazioni è 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é creare sequenze di animazioni?
Gli effetti complessi dell'interfaccia utente richiedono spesso più animazioni eseguite in ordine: un elemento entra scorrendo, rimane in pausa e poi scompare con una dissolvenza. CSS offre diversi strumenti per concatenare le animazioni senza JavaScript.
Usare animation-delay per creare sequenze
Il modo più semplice per creare una sequenza consiste nel calcolare quando deve iniziare l'animazione successiva in base alla durata di quella precedente:
<div class="element">Slides in, then fades out</div>
Keyframe con più passaggi
L'approccio più pulito per un singolo elemento consiste nel codificare l'intera sequenza in un'unica regola @keyframes con punti intermedi espressi in percentuale:
<div class="toast">Notification toast</div>
Proprietà personalizzate CSS per la durata
Memorizzi le durate nelle variabili CSS per coordinare facilmente le animazioni concatenate:
<div class="box">Custom-property-driven timing</div>
animation-timeline (moderno)
La Web Animations API e le animazioni collegate allo scorrimento (ScrollTimeline) consentono di creare sequenze sofisticate senza calcolare matematicamente i ritardi. Rappresentano il futuro dell'orchestrazione di animazioni CSS complesse.
Effetto sfalsato con proprietà personalizzate CSS
Gestisca i ritardi dell'effetto sfalsato tramite proprietà personalizzate CSS impostate inline o con JavaScript:
<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>
Creare sequenze con JavaScript
Per sequenze precise che coinvolgono più elementi, utilizzi la Web Animations API o una libreria come GSAP. CSS da solo presenta dei limiti nel coordinamento di elementi indipendenti con interdipendenze complesse.
Animazioni per attirare l'attenzione
Una sequenza di animazione che attira l'attenzione con un impulso seguito da un assestamento:
<div class="notification">New message!</div>
Evento AnimationEnd
Ascolti animationend in JavaScript per attivare programmaticamente il passaggio successivo:
<div class="box" id="ae-box">Watch me</div>
<script>
const el = document.getElementById('ae-box');
el.addEventListener('animationend', (e) => {
if (e.animationName === 'slideIn') {
el.classList.add('phase-2');
el.textContent = 'animationend fired!';
}
});
</script>
Schema di transizione di pagina
Una sequenza di transizione di pagina CSS che utilizza l'attivazione e la disattivazione di classi:
<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>
Scheletro dello stato di caricamento
Un'animazione di caricamento dello scheletro composta da più passaggi e basata su offset:
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
Verifica rapida
Qual è il modo migliore per codificare in CSS una sequenza completa di animazione con più passaggi per un singolo elemento?
Riepilogo
Per creare sequenze di animazioni CSS si possono usare ritardi calcolati sulle durate precedenti, regole @keyframes con più passaggi e punti intermedi espressi in percentuale oppure variabili di durata definite tramite proprietà personalizzate. L'evento animationend consente di attivare fasi successive tramite JavaScript. Per orchestrazioni complesse che coinvolgono più elementi, valuti l'utilizzo della Web Animations API.
Domande Frequenti
La lezione «Concatenare e mettere in sequenza le animazioni» è gratuita?
Sì — il testo completo di «Concatenare e mettere in sequenza le animazioni» è 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 «Concatenare e mettere in sequenza le animazioni»?
Crei sequenze complesse concatenando più animazioni con ritardi sfalsati. 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 «Concatenare e mettere in sequenza le animazioni»?
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
- Sintassi di @keyframes e proprietà animation
- Direzione, fill-mode e iterazione delle animazioni
- Concatenare e mettere in sequenza le animazioni
- Animazioni accessibili con prefers-reduced-motion