Frontend Academy · Lezione

Animazioni @keyframes

Definire animazioni a più fasi con @keyframes, applicarle con la sintassi abbreviata animation e controllarne iterazioni, direzione e fill-mode.

Animazioni @keyframes è una lezione Frontend 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Transizioni e animazioni

Le transizioni animano il passaggio tra due stati attivati da un cambiamento. Le animazioni @keyframes vengono eseguite automaticamente, possono ripetersi, essere invertite, essere riprodotte all’infinito e definire più passaggi intermedi: non richiedono alcun trigger.

Definire @keyframes

Dichiarate una sequenza di animazione con @keyframes. Definite gli stati in corrispondenza di percentuali (0%, 50%, 100%) oppure utilizzando le parole chiave from e to.

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

La sintassi abbreviata di animation

animation: name duration timing-function delay iteration-count direction fill-mode. Applicate l’animazione a un elemento con questa sintassi abbreviata.

.card {
  animation: fadeIn 0.4s ease-out forwards;
}

.loader {
  animation: pulse 1.5s ease-in-out infinite;
}

animation-iteration-count

Imposta il numero di volte in cui viene riprodotta l’animazione. infinite la ripete per sempre. Un numero la riproduce esattamente quel numero di volte.

.spinner {
  animation: spin 1s linear infinite;
}

.badge {
  animation: bounce 0.6s ease 3; /* plays 3 times */
}

animation-direction

normal (predefinito): in avanti ogni volta. reverse: all’indietro. alternate: in avanti e poi all’indietro. alternate-reverse. La modalità alternate è ideale per gli effetti ping-pong.

@keyframes swing {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}
.pendulum {
  animation: swing 1s ease-in-out infinite alternate;
}

animation-fill-mode

Controlla lo stato dell’elemento prima e dopo l’animazione. forwards: l’elemento mantiene lo stato dell’ultimo keyframe. backwards: applica lo stato from durante il ritardo. both: entrambe le modalità.

.entrance {
  opacity: 0;
  animation: fadeIn 0.5s ease 0.2s forwards;
  /* stays visible (opacity: 1) after animation ends */
}

animation-play-state

Mettete in pausa e riprendete le animazioni con JavaScript alternando animation-play-state: paused | running.

// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';

Animazioni multiple

Applicate più animazioni a un elemento separandole con virgole. Ogni animazione viene eseguita indipendentemente.

.icon {
  animation:
    rotate 2s linear infinite,
    pulse 1.5s ease-in-out infinite alternate;
}

Animazioni sfalsate con animation-delay

Sfalsate gli elementi di un elenco incrementando il ritardo per ogni elemento. Le proprietà personalizzate CSS rendono questa operazione semplice con JavaScript.

/* CSS */
.list-item {
  animation: slideIn 0.3s ease forwards;
  animation-delay: calc(var(--index) * 60ms);
}

/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
  el.style.setProperty('--index', i);
});

will-change — Suggerimento per il browser

will-change: transform segnala al browser che la proprietà verrà animata, consentendogli di promuovere in anticipo l’elemento al proprio livello del compositore. Utilizzatelo con parsimonia: un numero eccessivo di livelli del compositore spreca memoria GPU.

.animated {
  will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');

Esercizio pratico: schermata di caricamento skeleton

Le schermate skeleton utilizzano un’animazione shimmer per indicare che il contenuto è in fase di caricamento. Un gradiente scorre sulle forme segnaposto.

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #edf2f7 50%,
    #e2e8f0 75%
  ) 200% 0 / 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

Verifica rapida

Quale valore di animation-fill-mode fa sì che l’elemento mantenga lo stato dell’ultimo keyframe al termine dell’animazione?

Riepilogo: animazioni @keyframes

Definite le animazioni con @keyframes utilizzando from/to o le percentuali. Applicatele con la sintassi abbreviata animation. Utilizzate iteration-count per le ripetizioni. Impostate la direzione alternate per gli effetti ping-pong. Usate fill-mode: forwards per mantenere lo stato finale. Sfalsate le animazioni con animation-delay e le variabili CSS. Utilizzate keyframe di transform e opacity per animazioni fluide basate sul compositing.

Domande Frequenti

La lezione «Animazioni @keyframes» è gratuita?

Sì — il testo completo di «Animazioni @keyframes» è 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 «Animazioni @keyframes»?

Definire animazioni a più fasi con @keyframes, applicarle con la sintassi abbreviata animation e controllarne iterazioni, direzione e fill-mode. 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 3 di 4.

Quanto tempo richiede la lezione «Animazioni @keyframes»?

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

← Torna a Frontend Academy