{"id":1164,"date":"2026-01-11T13:24:58","date_gmt":"2026-01-11T13:24:58","guid":{"rendered":"https:\/\/studioimmens.com\/animation-timeline-view-guida-wordpress\/"},"modified":"2026-07-16T17:02:35","modified_gmt":"2026-07-16T15:02:35","slug":"animation-timeline-view-guida-wordpress","status":"publish","type":"post","link":"https:\/\/studioimmens.com\/en\/animation-timeline-view-guida-wordpress\/","title":{"rendered":"animation-timeline view: la guida completa per WordPress"},"content":{"rendered":"<p>La propriet&agrave; CSS <code>animation-timeline: view()<\/code> 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&#8217;uso avanzati, e come integrarla in WordPress per ottenere animazioni performanti e compatibili con tutti i browser.<\/p>\n<h2>Cos&#8221;&egrave; animation-timeline?<\/h2>\n<p>Nelle animazioni CSS tradizionali, la &#8220;linea del tempo&#8221; (timeline) &egrave; il tempo stesso: un&#8217;animazione con durata di 1 secondo parte quando viene applicata e finisce dopo 1 secondo, indipendentemente da ci&ograve; che succede nella pagina.<\/p>\n<p>Con <code>animation-timeline<\/code>, puoi cambiare la linea del tempo da &#8220;tempo&#8221; a &#8220;scroll&#8221;. In particolare, <code>animation-timeline: view()<\/code> lega l&#8217;animazione alla posizione dell&#8217;elemento nel viewport durante lo scroll. L&#8217;animazione progredisce mentre l&#8217;elemento &egrave; visibile sullo schermo.<\/p>\n<h2>La sintassi completa di animation-timeline<\/h2>\n<pre><code>.elemento {\n    animation: nomeAnimazione 1s linear both;\n    animation-timeline: view();\n    animation-range: entry 0% exit 100%;\n}<\/code><\/pre>\n<h3>Valori di animation-timeline<\/h3>\n<ul>\n<li><strong>none<\/strong>: default, nessuna timeline speciale<\/li>\n<li><strong>auto<\/strong>: timeline di default (basata sul tempo)<\/li>\n<li><strong>scroll()<\/strong>: legata allo scroll della pagina (o di un contenitore)<\/li>\n<li><strong>view()<\/strong>: legata alla visibilit&agrave; dell&#8217;elemento nel viewport<\/li>\n<\/ul>\n<h3>Parametri di view()<\/h3>\n<pre><code>view(axis, inset)<\/code><\/pre>\n<ul>\n<li><strong>axis<\/strong>: <code>block<\/code> (default, verticale), <code>inline<\/code> (orizzontale), <code>y<\/code>, <code>x<\/code><\/li>\n<li><strong>inset<\/strong>: spostamento del trigger (es. <code>view(block 20px)<\/code>)<\/li>\n<\/ul>\n<h2>Esempi avanzati con animation-timeline<\/h2>\n<h3>1. Animazione con direzione alternata<\/h3>\n<p>Usando <code>animation-direction: alternate<\/code>, l&#8217;animazione va avanti e indietro con lo scroll:<\/p>\n<pre><code>.alternato {\n    animation: fade 1s ease both;\n    animation-timeline: view();\n    animation-direction: alternate;\n}\n@keyframes fade {\n    0% { opacity: 0; transform: translateY(50px); }\n    100% { opacity: 1; transform: translateY(0); }\n}<\/code><\/pre>\n<h3>2. Elemento che ruota mentre scrolli<\/h3>\n<pre><code>.ruota {\n    animation: rotate 1s linear both;\n    animation-timeline: view();\n    animation-range: contain 0% contain 100%;\n}\n@keyframes rotate {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}<\/code><\/pre>\n<h3>3. Progresso di lettura<\/h3>\n<pre><code>.progresso {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 3px;\n    background: linear-gradient(to right, #00c7b1, #0d9488);\n    animation: progress 1s linear both;\n    animation-timeline: scroll();\n    transform-origin: left;\n}\n@keyframes progress {\n    from { transform: scaleX(0); }\n    to { transform: scaleX(1); }\n}<\/code><\/pre>\n<h2>Differenza tra scroll() e view()<\/h2>\n<p><strong>scroll()<\/strong> lega l&#8217;animazione allo scroll complessivo della pagina o di un contenitore. &Egrave; utile per barre di progresso, parallasse globale, effetti che coinvolgono l&#8217;intera pagina.<\/p>\n<p><strong>view()<\/strong> lega l&#8217;animazione alla visibilit&agrave; del singolo elemento. &Egrave; utile per animazioni che partono quando un elemento entra nel viewport, come fade-in, slide-up, zoom.<\/p>\n<h2>Fallback per browser non supportati<\/h2>\n<p>Per garantire che le animazioni funzionino anche su browser che non supportano animation-timeline, segui questa strategia a tre livelli:<\/p>\n<h3>Livello 1: CSS nativo (browser moderni)<\/h3>\n<p>L&#8217;animazione principale usa <code>animation-timeline: view()<\/code>. I browser che la supportano ignorano la durata fissa e usano lo scroll come timeline.<\/p>\n<h3>Livello 2: Fallback CSS (browser senza supporto, JS disabilitato)<\/h3>\n<p>Aggiungi <code>animation-duration: 1s<\/code> come fallback. I browser senza supporto ignorano animation-timeline e usano la durata fissa:<\/p>\n<pre><code>.animato {\n    animation: fadeInUp 1s ease both;\n    animation-timeline: view();\n}<\/code><\/pre>\n<h3>Livello 3: Polyfill JS (browser senza supporto, JS abilitato)<\/h3>\n<p>Un JavaScript leggero rileva se il browser supporta <code>CSS.supports('animation-timeline', 'view()')<\/code>. Se non supporta, attiva un polyfill che scruba l&#8217;animazione via requestAnimationFrame.<\/p>\n<h2>Polyfill JS: come funziona tecnicamente<\/h2>\n<pre><code>if (!CSS.supports('animation-timeline', 'view()')) {\n    const elements = document.querySelectorAll('.animato');\n    \n    function updateAnimations() {\n        const vh = window.innerHeight;\n        \n        elements.forEach(el =&gt; {\n            const rect = el.getBoundingClientRect();\n            const elTop = rect.top + window.scrollY;\n            const elHeight = rect.height;\n            const progress = (window.scrollY + vh - elTop) \/ (elHeight + vh);\n            const clamped = Math.max(0, Math.min(1, progress));\n            \n            el.style.animationDelay = (-clamped) + 's';\n            el.style.animationPlayState = 'paused';\n        });\n        \n        requestAnimationFrame(updateAnimations);\n    }\n    \n    updateAnimations();\n}<\/code><\/pre>\n<h2>Usare le animazioni scroll-driven in WordPress senza codice<\/h2>\n<p>Se tutto questo ti sembra complesso, <a href=\"https:\/\/studioimmens.com\/en\/classyblocks-pro\/\">ClassyBlocks Pro<\/a> 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.<\/p>","protected":false},"excerpt":{"rendered":"<p>La propriet&agrave; 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&#8217;uso avanzati, e come integrarla in WordPress per ottenere animazioni performanti e compatibili con tutti i browser. [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1225,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","ai_primary_source":"Studio Immens Blog","visibility_scope":"","ai_summary":"","ai_intent":"informative","ai_related_resources":"","ai_priority":0,"ai_entity_type":"","ai_is_based_on":"","ai_citations":"","ai_mentions":"","ai_speakable_selector":"","ai_chunk_hints":"","footnotes":""},"categories":[40],"tags":[116,118,115,117],"ai_visibility":[],"class_list":["post-1164","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppo-web","tag-animazioni-css","tag-core-web-vitals","tag-performance-wordpress","tag-scroll-driven"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/comments?post=1164"}],"version-history":[{"count":2,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1164\/revisions"}],"predecessor-version":[{"id":2146,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1164\/revisions\/2146"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media\/1225"}],"wp:attachment":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media?parent=1164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/categories?post=1164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/tags?post=1164"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/ai_visibility?post=1164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}