Animazioni allo scroll in CSS: dal 2026 funzionano in tutti i browser, senza JavaScript

Di Daniele Forciniti

Indice del Contenuto

Dal 27 ottobre 2026 le animazioni allo scroll si possono fare solo con il CSS, senza una riga di JavaScript, e funzionano in tutti i browser principali: Chrome, Edge, Safari e Firefox. Con la proprietà animation-timeline un’animazione non va più avanti con il tempo, ma con lo scorrimento della pagina: la barra che mostra quanto hai letto, le card che compaiono quando entrano nello schermo, l’immagine che svanisce mentre scorri. Firefox 159 è stato l’ultimo ad arrivare, e da quel giorno la funzione ha il bollino “Baseline 2026”: si può usare nei siti veri, con un piccolo accorgimento per i browser non aggiornati.

Cosa è successo e perché è una buona notizia

Il 27 ottobre è uscito Firefox 159, e nelle note di rilascio per sviluppatori c’è una riga che molti aspettavano: le animazioni guidate dallo scroll sono attive di serie. Chrome ed Edge le avevano dalla versione 115, a luglio 2023, e Safari dalla versione 26, a settembre 2025, come spiega il blog di WebKit. Con Firefox il cerchio si chiude.

Cronologia del supporto alle animazioni guidate dallo scroll: Chrome e Edge 115, Safari 26, Firefox 159

Lo stesso giorno la funzione è entrata in Baseline, il sistema con cui i browser e MDN segnalano cosa si può usare senza problemi. Per l’esattezza è “newly available”, cioè disponibile nelle ultime versioni di tutti i browser principali. Diventerà “widely available”, il livello che dà la massima tranquillità, 30 mesi dopo, cioè verso aprile 2029. Secondo Can I use oggi copre circa l’89% degli utenti nel mondo.

Perché è una buona notizia per chi ha un sito? Fino a ieri questi effetti si facevano con JavaScript: librerie come GSAP con ScrollTrigger o AOS, oppure le animazioni d’ingresso dei page builder. Codice in più da scaricare, da eseguire e da aggiornare, solo per far comparire tre card.

	Con JavaScript (come si faceva)	Con CSS (da ora)
Cosa serve	Una libreria o uno script che ascolta lo scroll	Due o tre righe di CSS
Peso sulla pagina	File JavaScript da scaricare ed eseguire	Nessun file in più
Fluidità	Dipende dal thread principale, che può essere occupato	Il browser può gestirla fuori dal thread principale
Manutenzione	Aggiornamenti della libreria e possibili conflitti	Solo CSS, niente dipendenze
Browser vecchi	Funziona quasi ovunque	Va previsto un piano B (lo vediamo sotto)

Come funziona: scroll() e view()

Un’animazione CSS normale avanza con il tempo: dura due secondi, parte e finisce. La proprietà animation-timeline cambia l’orologio: invece del tempo, la fa avanzare lo scroll. Le animazioni si scrivono con gli stessi @keyframes di sempre, cambia solo chi le muove. Gli orologi possibili sono due.

scroll(): l’animazione segue quanto hai scorso un contenitore, di solito l’intera pagina. Allo 0% sei in cima, al 100% in fondo. È quello giusto per la barra di avanzamento della lettura.
view(): l’animazione segue il passaggio di un elemento dentro lo schermo, da quando entra dal basso a quando esce dall’alto. È quello giusto per far comparire testi, immagini e card.

Con view() si sceglie anche in quale tratto del passaggio far succedere l’animazione, con la proprietà animation-range. I nomi dei tratti sono quattro: entry (mentre entra), contain (mentre è tutto visibile), exit (mentre esce) e cover (tutto il viaggio).

Le fasi di view() nelle animazioni CSS allo scroll: entry, contain, exit e cover

Tre esempi pronti da copiare

Gli esempi che seguono li ho provati uno per uno in Chromium 145, anche con le animazioni ridotte attive, e ho controllato su MDN che le proprietà usate siano supportate da Firefox 159 e Safari 26. Ognuno ha già dentro le due protezioni di cui parlo più avanti: il controllo per i browser vecchi e il rispetto di chi ha disattivato le animazioni.

Demo di animazioni allo scroll in solo CSS: barra di lettura e card che compaiono

1. La barra di avanzamento della lettura

Una sottile barra in cima alla pagina che si riempie mentre leggi. Basta un elemento vuoto con la classe barra-lettura, di solito subito dopo l’apertura del body.

.barra-lettura {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #ff9c00;
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 999;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .barra-lettura {
      animation: avanza 1ms linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@keyframes avanza {
  to { transform: scaleX(1); }
}

2. Elementi che compaiono quando entrano nello schermo

L’effetto più usato in assoluto: testi, immagini e card che salgono e si accendono mentre li scorri. Dai la classe appare agli elementi che vuoi animare. Con entry 0% cover 30% l’animazione parte appena l’elemento spunta dal basso e finisce quando ha fatto un terzo del suo viaggio, quindi è già completa quando arriva a metà schermo.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .appare {
      animation: comparsa 1ms linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}

@keyframes comparsa {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

3. Il titolo della prima sezione che svanisce mentre scorri

Il contenuto della sezione iniziale (hero) si alza e svanisce mentre l’utente scende. Qui si usa il tratto exit: l’animazione succede solo mentre l’elemento esce dall’alto.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-contenuto {
      animation: svanisce 1ms linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

@keyframes svanisce {
  to { opacity: 0; transform: translateY(-60px) scale(.96); }
}

Per vedere decine di altri effetti, dai caroselli 3D alle card che si impilano, il sito scroll-driven-animations.style di Bramus Van Damme, che lavora sul tema per Google, raccoglie demo e strumenti per capire i tratti di view().

Gli errori più comuni (e come evitarli)

Provando gli esempi ho trovato tre trappole che quasi nessuna guida in italiano segnala. Conviene conoscerle prima, perché in tutti e tre i casi il codice sembra giusto ma l’animazione non parte.

L’ordine delle proprietà

Lo shorthand animation riporta animation-timeline al valore predefinito, e non può impostarla. Se scrivi la timeline prima dello shorthand, viene cancellata e l’animazione torna a seguire il tempo: dura un millisecondo e finisce subito. MDN lo dice chiaramente, e nel mio test è successo esattamente questo. La regola: animation-timeline sempre dopo animation.

/* NON funziona: lo shorthand animation azzera la timeline */
.appare {
  animation-timeline: view();
  animation: comparsa 1ms linear both;
}

/* Funziona: la timeline va dopo */
.appare {
  animation: comparsa 1ms linear both;
  animation-timeline: view();
}

overflow: hidden sul contenitore

Questa mi ha fatto perdere un quarto d’ora. Se la barra di avanzamento sta dentro un contenitore con overflow: hidden (capita spesso, magari solo per arrotondare gli angoli) e usi scroll(nearest), la barra resta ferma a zero. Il motivo è che hidden trasforma il contenitore in un’area scorrevole, e il browser segue quello, che però non scorre mai. La soluzione è usare overflow: clip, che taglia allo stesso modo ma non crea un’area scorrevole, oppure puntare direttamente alla pagina con scroll(root). Nel mio test, a metà pagina la barra con hidden era a 0, quella con clip al 50%.

La durata dell’animazione

Con una timeline di scroll la durata non conta, perché è lo scroll a decidere il ritmo. Firefox 159 accetta il valore auto, che è quello predefinito, ma molti sviluppatori scrivono comunque 1ms nello shorthand, come negli esempi sopra: non cambia niente nei browser aggiornati ed evita sorprese con quelli che trattavano la durata in modo diverso. Non scrivere invece 2s pensando di rallentare l’effetto: la velocità la decide il tratto scelto con animation-range.

Le due protezioni da mettere sempre

Baseline “newly available” vuol dire che le ultime versioni dei browser la supportano, non che tutti i tuoi visitatori le abbiano. Circa un utente su dieci usa ancora un browser che non la conosce: iPhone non aggiornati, vecchie versioni di Firefox, browser di alcuni Android. Per loro serve un piano B.

Il controllo @supports. Mettendo le animazioni dentro @supports (animation-timeline: view()), i browser che non le capiscono saltano tutto il blocco. Attenzione a come scrivi gli stati iniziali: negli esempi l’opacità a zero sta solo nei @keyframes, quindi chi non ha il supporto vede gli elementi normalmente, senza animazione. Se invece metti opacity: 0 fuori dal controllo, nei browser vecchi i contenuti restano invisibili. È l’errore che fa più danni, anche alla SEO, perché un testo nascosto è un testo che l’utente non legge.
Le animazioni ridotte. Alcune persone disattivano le animazioni nelle impostazioni del telefono o del computer, per esempio per problemi di vertigini o di attenzione. Con @media (prefers-reduced-motion: no-preference) le animazioni partono solo per chi non ha chiesto di ridurle. Nel mio test con le animazioni ridotte attive tutti i contenuti erano visibili e fermi. La documentazione di MDN spiega bene come funziona l’impostazione.

Come usare le animazioni allo scroll su WordPress, Elementor e Wix Studio

Non serve essere sviluppatori. Si aggiungono con lo stesso metodo che si usa per qualsiasi altro stile personalizzato:

WordPress: incolli il CSS in Aspetto, Personalizza, CSS aggiuntivo (o nel campo CSS del tema a blocchi) e aggiungi la classe appare ai blocchi che vuoi animare, dal pannello Avanzate, “Classi CSS aggiuntive”.
Elementor: il CSS va nel CSS personalizzato del sito, la classe in Avanzate, “Classi CSS”. Con l’editor V4 di Elementor e la nuova gestione delle classi è ancora più comodo, perché la classe la crei una volta e la riusi ovunque. Se usi le “Animazioni d’ingresso” di Elementor, disattivale sugli stessi elementi, per non sommare due effetti.
Wix Studio: il CSS personalizzato del sito permette di aggiungere le stesse regole e di assegnare le classi agli elementi. Con il vecchio editor Wix classico questa strada non c’è.

Sui siti che seguo, sia in WordPress sia in Wix Studio, d’ora in poi è questa la strada che propongo per gli effetti allo scroll, al posto delle librerie.

Cosa cambia per le prestazioni e la SEO

Google non premia un sito perché è animato in CSS invece che in JavaScript. Quello che conta è l’effetto sui Core Web Vitals, e lì il guadagno è concreto. Meno JavaScript da scaricare ed eseguire vuol dire un thread principale più libero, e quindi una pagina che risponde prima a clic e tocchi: è quello che misura l’INP. Secondo la guida di Chrome for Developers, queste animazioni possono girare fuori dal thread principale, cosa che con gli script che ascoltano lo scroll era quasi impossibile.

Due attenzioni, però. La prima: anima soprattutto transform e opacity, che il browser gestisce senza ricalcolare la pagina; animare altezze, margini o posizioni annulla buona parte del vantaggio. La seconda: non nascondere i contenuti più importanti, come il titolo e il primo paragrafo, dietro un’animazione d’ingresso. Se l’elemento più grande della pagina parte invisibile, rischi di peggiorare l’LCP.

La mia opinione

Costruisco siti da oltre dieci anni, e ho perso il conto delle volte in cui ho dovuto caricare una libreria intera solo per far comparire tre card mentre scorri. È una di quelle novità che non fanno rumore ma cambiano il lavoro di tutti i giorni: meno codice, meno plugin, meno cose che si rompono a ogni aggiornamento.

Il consiglio che do è di usarle, ma con misura. Un sito che si muove a ogni scroll stanca in fretta e distrae da quello che conta, cioè il contenuto e il contatto. Una barra di lettura negli articoli, una comparsa leggera sulle card dei servizi, magari un hero che svanisce: già così il sito sembra più curato, senza pesare un grammo in più. E sempre con le due protezioni, perché un effetto che nasconde i testi a un utente su dieci non vale l’effetto.

Riassumendo

Dal 27 ottobre 2026, con Firefox 159, le animazioni guidate dallo scroll funzionano in Chrome, Edge, Safari e Firefox con il solo CSS. Si usano animation-timeline: scroll() per seguire lo scorrimento della pagina e view() per seguire il passaggio di un elemento nello schermo, scegliendo il tratto con animation-range. Vanno sempre protette con @supports e prefers-reduced-motion, scrivendo la timeline dopo lo shorthand animation e facendo attenzione a overflow: hidden. Il vantaggio è meno JavaScript, animazioni più fluide e un aiuto ai Core Web Vitals.

FAQ

Da quando le animazioni allo scroll in CSS funzionano in tutti i browser?

Dal 27 ottobre 2026, con l’uscita di Firefox 159. Chrome ed Edge le supportano dalla versione 115 (luglio 2023), Safari dalla versione 26 (settembre 2025).

Serve ancora JavaScript per questi effetti?

Per comparse, barre di avanzamento, parallasse e dissolvenze no. JavaScript resta utile per logiche complesse, per esempio animazioni che dipendono da dati o da azioni dell’utente, e come piano B se devi garantire l’effetto anche nei browser vecchi.

Cosa succede nei browser vecchi?

Se usi il controllo @supports e lasci gli stati iniziali solo nei keyframes, nei browser vecchi i contenuti si vedono normalmente, senza animazione. Il sito resta completo, manca solo l’effetto.

Qual è la differenza tra scroll() e view()?

scroll() segue quanto hai scorso un contenitore, di solito la pagina intera, ed è adatto alla barra di lettura. view() segue il passaggio di un singolo elemento dentro lo schermo, ed è adatto a far comparire testi e immagini.

Perché la mia animazione non parte?

Le cause più comuni sono tre: animation-timeline scritta prima dello shorthand animation, un contenitore con overflow: hidden che diventa l’area di scroll seguita dal browser, oppure le animazioni ridotte attive sul dispositivo, che con il codice giusto le disattivano di proposito.

Questi effetti aiutano la SEO?

Non direttamente. Aiutano le prestazioni, perché tolgono JavaScript dalla pagina e possono migliorare l’INP. Possono invece danneggiare se nascondono i contenuti principali o rallentano la comparsa dell’elemento più grande della pagina.

Si possono usare su WordPress ed Elementor senza plugin?

Sì. Basta incollare il CSS nel CSS aggiuntivo del tema o nel CSS personalizzato di Elementor e assegnare una classe agli elementi da animare.

Fonti

MDN, note di rilascio di Firefox 159: le animazioni guidate dallo scroll attive di serie dal 27 ottobre 2026.
WebKit, le novità di Safari 26.0: arrivo delle animazioni guidate dallo scroll in Safari.
web-features, scheda scroll-driven-animations: stato Baseline e versioni dei browser.
MDN, CSS scroll-driven animations, animation-timeline e animation-range: la documentazione di riferimento.
Chrome for Developers, Animate elements on scroll with Scroll-driven animations: la guida di Google con demo.
Can I use, scroll-driven animations: copertura dei browser in tempo reale.

Daniele Forciniti

Sono Daniele Forciniti, un esperto di web design e SEO con oltre 10 anni di esperienza e diverse certificazioni professionali. Mi specializzo in HTML e CSS, utilizzo CMS come WordPress. Sono il maggior esperto in Italia di WIX e WIX Studio, mi occupo anche di SEO posizionamento web nei motori di ricerca e digital marketing. Sono appassionato del mio lavoro e continuo ad aggiornare le mie competenze per fornire soluzioni innovative e di alta qualità ai miei clienti.