La proprietà CSS animation-timeline: view() sta cambiando radicalmente il modo in cui pensiamo e realizziamo le animazioni web. In questa guida approfondita, esploriamo ogni aspetto di questa potente feature: come funziona, come si usa, quali sono i casi d’uso avanzati, e come integrarla in WordPress per ottenere animazioni performanti e compatibili con tutti i browser.
Cosӏ animation-timeline?
Nelle animazioni CSS tradizionali, la “linea del tempo” (timeline) è il tempo stesso: un’animazione con durata di 1 secondo parte quando viene applicata e finisce dopo 1 secondo, indipendentemente da ciò che succede nella pagina.
Con animation-timeline, puoi cambiare la linea del tempo da “tempo” a “scroll”. In particolare, animation-timeline: view() lega l’animazione alla posizione dell’elemento nel viewport durante lo scroll. L’animazione progredisce mentre l’elemento è visibile sullo schermo.
La sintassi completa di animation-timeline
.elemento {
animation: nomeAnimazione 1s linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}Valori di animation-timeline
- none: default, nessuna timeline speciale
- auto: timeline di default (basata sul tempo)
- scroll(): legata allo scroll della pagina (o di un contenitore)
- view(): legata alla visibilità dell’elemento nel viewport
Parametri di view()
view(axis, inset)- axis:
block(default, verticale),inline(orizzontale),y,x - inset: spostamento del trigger (es.
view(block 20px))
Esempi avanzati con animation-timeline
1. Animazione con direzione alternata
Usando animation-direction: alternate, l’animazione va avanti e indietro con lo scroll:
.alternato {
animation: fade 1s ease both;
animation-timeline: view();
animation-direction: alternate;
}
@keyframes fade {
0% { opacity: 0; transform: translateY(50px); }
100% { opacity: 1; transform: translateY(0); }
}2. Elemento che ruota mentre scrolli
.ruota {
animation: rotate 1s linear both;
animation-timeline: view();
animation-range: contain 0% contain 100%;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}3. Progresso di lettura
.progresso {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #00c7b1, #0d9488);
animation: progress 1s linear both;
animation-timeline: scroll();
transform-origin: left;
}
@keyframes progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}Differenza tra scroll() e view()
scroll() lega l’animazione allo scroll complessivo della pagina o di un contenitore. È utile per barre di progresso, parallasse globale, effetti che coinvolgono l’intera pagina.
view() lega l’animazione alla visibilità del singolo elemento. È utile per animazioni che partono quando un elemento entra nel viewport, come fade-in, slide-up, zoom.
Fallback per browser non supportati
Per garantire che le animazioni funzionino anche su browser che non supportano animation-timeline, segui questa strategia a tre livelli:
Livello 1: CSS nativo (browser moderni)
L’animazione principale usa animation-timeline: view(). I browser che la supportano ignorano la durata fissa e usano lo scroll come timeline.
Livello 2: Fallback CSS (browser senza supporto, JS disabilitato)
Aggiungi animation-duration: 1s come fallback. I browser senza supporto ignorano animation-timeline e usano la durata fissa:
.animato {
animation: fadeInUp 1s ease both;
animation-timeline: view();
}Livello 3: Polyfill JS (browser senza supporto, JS abilitato)
Un JavaScript leggero rileva se il browser supporta CSS.supports('animation-timeline', 'view()'). Se non supporta, attiva un polyfill che scruba l’animazione via requestAnimationFrame.
Polyfill JS: come funziona tecnicamente
if (!CSS.supports('animation-timeline', 'view()')) {
const elements = document.querySelectorAll('.animato');
function updateAnimations() {
const vh = window.innerHeight;
elements.forEach(el => {
const rect = el.getBoundingClientRect();
const elTop = rect.top + window.scrollY;
const elHeight = rect.height;
const progress = (window.scrollY + vh - elTop) / (elHeight + vh);
const clamped = Math.max(0, Math.min(1, progress));
el.style.animationDelay = (-clamped) + 's';
el.style.animationPlayState = 'paused';
});
requestAnimationFrame(updateAnimations);
}
updateAnimations();
}Usare le animazioni scroll-driven in WordPress senza codice
Se tutto questo ti sembra complesso, ClassyBlocks Pro fa tutto automaticamente. Include 151 animazioni scroll-driven in 12 pack, con polyfill JS automatico che si attiva solo quando serve. Su Chrome, Edge e Opera le animazioni sono CSS native con zero JavaScript. Su Safari e Firefox, il polyfill prende il controllo. 100 Lighthouse, zero configurazioni.
