A breve saranno disponibili le animazioni CSS attivate dallo scorrimento.

Bramus

Data di pubblicazione: 12 dicembre 2025

Nel 2023 abbiamo introdotto le animazioni basate sullo scorrimento, che ti consentono di avanzare (o riavvolgere) un'animazione scorrendo. Con le animazioni basate sullo scorrimento, l'avanzamento dell'animazione va dallo 0% al 100% man mano che scorri. Se interrompi lo scorrimento, l'animazione si mette in pausa; se scorri di nuovo verso l'alto, l'animazione si inverte.

Il prossimo capitolo delle animazioni basate sullo scorrimento arriverà nel 2026, con le animazioni attivate dallo scorrimento in Chrome 145. Si tratta di animazioni basate sul tempo che si attivano quando si supera uno specifico offset di scorrimento.

Dì addio a IntersectionObserver per questo tipo di effetto, perché ora puoi farlo in modo dichiarativo in CSS.

Attivatori della sequenza temporale, attivatori dell'animazione e azioni

Attivare un'animazione

Per configurare un'animazione attivata dallo scorrimento in CSS, inizia con un'animazione CSS normale collegata a un elemento:

animation: unclip 0.35s ease-in-out both;

Questa animazione utilizza un DocumentTimeline come driver e dura 0,35 secondi. L'animazione viene attivata automaticamente dopo il caricamento della pagina. Per modificare il trigger, utilizza la nuova proprietà CSS animation-trigger:

animation-trigger: --t play-forwards play-backwards;

In questo caso, l'animazione è impostata per essere attivata dal trigger --t. Quando l'attivatore viene attivato, viene richiamata l'azione play-forwards sull'animazione e quando l'attivatore viene disattivato, viene richiamata l'azione play-backwards.

La specifica contiene l'elenco completo delle azioni.

Crea un trigger

Ma che cos'è questo trigger --t? Si tratta di un trigger con il nome --t. Per le animazioni attivate dallo scorrimento, si tratta di un "trigger della sequenza temporale" che utilizza una sequenza temporale di avanzamento dello scorrimento o una sequenza temporale di avanzamento della visualizzazione come origine.

Per definire un trigger della sequenza temporale, utilizza la proprietà timeline-trigger (o le relative abbreviazioni). Ad esempio, per creare un trigger denominato --t che utilizza una cronologia delle visualizzazioni come origine, utilizza quanto segue:

timeline-trigger-name: --t;
timeline-trigger-source: view();

L'attivatore creato --t si attiva e si disattiva in base alla cronologia delle visualizzazioni associata all'elemento corrispondente. Poiché l'intervallo predefinito per una sequenza temporale della visualizzazione è l'intervallo cover, il trigger si attiva e si disattiva anche quando si trova all'interno o all'esterno di questo intervallo.

Modificare gli intervalli del trigger

Per modificare le posizioni in cui l'attivatore deve essere attivo o inattivo, specifica gli intervalli di attivazione e attivi sull'attivatore. Nell'esempio seguente, l'intervallo di attivazione è impostato su entry 100% exit 0%, il che significa che il trigger si attiverà quando il soggetto si trova all'interno di questo intervallo.

timeline-trigger:
  --t
  view()
  entry 100% exit 0%
;

Poiché nello snippet precedente non è specificato alcun intervallo attivo, l'intervallo di attivazione viene utilizzato anche come intervallo attivo. Al di fuori di questo intervallo attivo, l'attivatore viene disattivato.

Se combinato con animation-trigger già definito, il risultato visivo è che l'animazione viene riprodotta in avanti quando il soggetto è entrato completamente nella scrollport e all'indietro quando sta per uscire.

È possibile avere intervalli di attivazione e attivi diversi. Ad esempio:

timeline-trigger:
  --t
  view()
  entry 100% exit 0% / entry 0% exit 100%
;

In questo caso, l'attivatore si attiva quando l'oggetto si trova nell'intervallo entry 100% exit 0%. Il trigger rimane attivo finché non esce dall'intervallo entry 0% exit 100%.

A livello visivo, l'animazione viene riprodotta in avanti quando il soggetto entra nel riquadro di scorrimento e, a differenza di prima, rimane attiva finché il soggetto non ha lasciato completamente il riquadro di scorrimento.

Limitare l'ambito di un trigger

I trigger sono visibili a livello globale, il che significa che l'ultima corrispondenza che dichiara un trigger con un determinato nome "vince". Per limitare la visibilità di un trigger, utilizza la proprietà trigger-scope. È simile al modo in cui può essere utilizzato anchor-scope.

trigger-scope: --t; /* List of dashed idents, or `all` */

Quando hai una regola CSS che dichiara un trigger e che corrisponde a più elementi, devi utilizzare trigger-scope.

Demo

Nella seguente demo, un modulo è suddiviso in varie sezioni a tutta altezza. Man mano che ogni parte del modulo viene visualizzata, viene animata utilizzando un'animazione attivata dallo scorrimento. Quando esci dalla finestra di visualizzazione, l'animazione scompare.

La logica di animazione attivata dallo scorrimento è la seguente:

@keyframes card {
  from { translate: 0 -50% 0; }
}

@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacity: 1; height: auto; }
}

.card {
  overflow-y: clip; /* Hide any overflow in the y-axis */

  timeline-trigger:
    --t
    view()
    contain 15% contain 85% / entry 100% exit 0%
  ;
  trigger-scope: --t;

  animation: unclip var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

.card > * {
  interpolate-size: allow-keywords; /* To animate to `height: auto` */

  animation: card-contents var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

Sezionato, il codice recita:

• timeline-trigger è denominato --t e la sua origine è impostata su una cronologia delle visualizzazioni che monitora l'elemento corrispondente.
• L'intervallo di attivazione del trigger è contain 15% contain 85%. Quando il soggetto si trova all'interno di questo intervallo, l'attivatore diventa attivo.
• Una volta attivato, il trigger rimane attivo finché il soggetto si trova nel raggio attivo di entry 100% exit 0%.
• L'animazione unclip è allegata all'elemento.
• L'animazione è impostata per utilizzare --t come origine del trigger. Quando l'attivatore diventa attivo, l'animazione inizia a essere riprodotta in avanti.
• Quando il trigger si disattiva, ovvero quando il soggetto esce dal raggio attivo, l'animazione viene riprodotta all'indietro.
• Anche i contenuti della scheda vengono animati in entrata e in uscita utilizzando lo stesso trigger --t.

L'esempio include un fallback che utilizza IntersectionObserver per i browser che non supportano timeline-trigger.

Altre demo

Se non ne hai mai abbastanza di animazioni attivate dallo scorrimento, dai un'occhiata alle seguenti demo:

• Testo in entrata
• Incontra i mostri (scrollytelling)
• Forma che cambia aspetto

Feedback

Ci interessa ricevere feedback per continuare a migliorare questa funzionalità. Contattaci sui social media o segnala un problema al CSS Working Group per lasciare un feedback.

Se riscontri un bug, segnalalo in Chromium per comunicarcelo. Elenco dei bug noti: consulta lo strumento di monitoraggio dei bug di Chromium.