{"id":1163,"date":"2026-01-10T18:52:38","date_gmt":"2026-01-10T18:52:38","guid":{"rendered":"https:\/\/studioimmens.com\/animazioni-scroll-driven-css-wordpress\/"},"modified":"2026-07-16T17:02:33","modified_gmt":"2026-07-16T15:02:33","slug":"animazioni-scroll-driven-css-wordpress","status":"publish","type":"post","link":"https:\/\/studioimmens.com\/en\/animazioni-scroll-driven-css-wordpress\/","title":{"rendered":"Animazioni scroll-driven CSS in WordPress: guida completa"},"content":{"rendered":"<p>Le animazioni scroll-driven rappresentano una delle innovazioni pi&ugrave; significative nel mondo del CSS moderno. Con la propriet&agrave; <code>animation-timeline: view()<\/code>, puoi creare animazioni che si attivano e progrediscono in base alla posizione dello scroll dell&#8217;utente, senza una riga di JavaScript. In questa guida completa vedremo come funzionano, come implementarle in WordPress e come sfruttarle al massimo per creare siti web coinvolgenti e performanti.<\/p>\n<h2>Cosa sono le animazioni scroll-driven<\/h2>\n<p>Le animazioni scroll-driven sono animazioni CSS che avanzano in base alla posizione dello scroll dell&#8217;utente, non in base al tempo. Questo significa che l&#8217;animazione &egrave; legata al movimento della pagina: mentre l&#8217;utente scrolla verso il basso, l&#8217;animazione progredisce. Mentre scrolla verso l&#8217;alto, l&#8217;animazione regredisce. Il risultato &egrave; un effetto naturale e fluido, come se gli elementi &#8220;prendessero vita&#8221; mentre appaiono sullo schermo.<\/p>\n<h2>La rivoluzione di animation-timeline: view()<\/h2>\n<p>Prima dell&#8217;introduzione di <code>animation-timeline<\/code>, per creare animazioni scroll-driven dovevi usare librerie JavaScript come AOS, GSAP o ScrollMagic. Queste librerie funzionavano ascoltando l&#8217;evento scroll del browser e calcolando manualmente la posizione degli elementi. Il problema? Ogni libreria aggiungeva decine di KB al caricamento della pagina, occupava il thread principale del browser e impattava negativamente sui Core Web Vitals.<\/p>\n<p>Con <code>animation-timeline: view()<\/code>, le animazioni sono gestite nativamente dal browser. Non c&#8217;&egrave; JavaScript da scaricare, analizzare o eseguire. Il browser si occupa di tutto, su un thread separato, senza influenzare le performance della pagina.<\/p>\n<h2>Come funziona animation-timeline: view()<\/h2>\n<pre><code>@keyframes fadeInUp {\n    from {\n        opacity: 0;\n        transform: translateY(50px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.elemento-animato {\n    animation: fadeInUp 1s ease both;\n    animation-timeline: view();\n    animation-range: entry 0% entry 100%;\n}<\/code><\/pre>\n<p>Analizziamo ogni parte:<\/p>\n<ul>\n<li><strong>@keyframes fadeInUp<\/strong>: definiamo l&#8217;animazione come faremmo normalmente<\/li>\n<li><strong>animation: fadeInUp 1s ease both<\/strong>: specifichiamo l&#8217;animazione (la durata di 1s viene ignorata dai browser che supportano animation-timeline, ma serve come fallback)<\/li>\n<li><strong>animation-timeline: view()<\/strong>: &egrave; la chiave di tutto. Dice al browser di legare l&#8217;animazione alla posizione dell&#8217;elemento nel viewport<\/li>\n<li><strong>animation-range: entry 0% entry 100%<\/strong>: definisce quando l&#8217;animazione inizia (0% = l&#8217;elemento inizia a entrare) e quando finisce (100% = l&#8217;elemento &egrave; completamente entrato)<\/li>\n<\/ul>\n<h2>I valori di animation-range spiegati<\/h2>\n<ul>\n<li><strong>entry<\/strong>: da quando l&#8217;elemento inizia a entrare nel viewport a quando &egrave; completamente visibile<\/li>\n<li><strong>exit<\/strong>: da quando l&#8217;elemento inizia a uscire a quando &egrave; completamente uscito<\/li>\n<li><strong>cover<\/strong>: copre l&#8217;intero passaggio dell&#8217;elemento attraverso il viewport (dall&#8217;inizio dell&#8217;ingresso alla fine dell&#8217;uscita)<\/li>\n<li><strong>contain<\/strong>: l&#8217;animazione vale solo quando l&#8217;elemento &egrave; completamente visibile (dal momento in cui &egrave; entrato a quando inizia a uscire)<\/li>\n<\/ul>\n<p>Puoi combinare questi valori per effetti precisi:<\/p>\n<pre><code>\/* Effetto che inzia quando l'elemento &egrave; entrato al 20% e finisce quando &egrave; uscito al 50% *\/\nanimation-range: entry 20% exit 50%;\n\n\/* Effetto che vale solo quando l'elemento &egrave; completamente visibile *\/\nanimation-range: contain 0% contain 100%;<\/code><\/pre>\n<h2>Esempi pratici di animazioni scroll-driven<\/h2>\n<h3>Fade In classico<\/h3>\n<pre><code>.fade-in { animation: fadeIn 1s ease both; animation-timeline: view(); }\n@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }<\/code><\/pre>\n<h3>Slide Up con fade<\/h3>\n<pre><code>.slide-up { animation: slideUp 1s ease both; animation-timeline: view(); animation-range: entry 0% entry 100%; }\n@keyframes slideUp { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(0); } }<\/code><\/pre>\n<h3>Zoom In progressivo<\/h3>\n<pre><code>.zoom-in { animation: zoomIn 1s ease both; animation-timeline: view(); }\n@keyframes zoomIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }<\/code><\/pre>\n<h3>Rivelazione laterale<\/h3>\n<pre><code>.slide-right { animation: slideRight 1s ease both; animation-timeline: view(); }\n@keyframes slideRight { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } }<\/code><\/pre>\n<h2>Browser support e polyfill<\/h2>\n<table>\n<tr>\n<th>Browser<\/th>\n<th>Supporto<\/th>\n<th>Dettaglio<\/th>\n<\/tr>\n<tr>\n<td>Chrome<\/td>\n<td>115+<\/td>\n<td>Nativo, zero JS<\/td>\n<\/tr>\n<tr>\n<td>Edge<\/td>\n<td>115+<\/td>\n<td>Nativo, zero JS<\/td>\n<\/tr>\n<tr>\n<td>Opera<\/td>\n<td>101+<\/td>\n<td>Nativo, zero JS<\/td>\n<\/tr>\n<tr>\n<td>Safari<\/td>\n<td>Parziale<\/td>\n<td>Supporto in sviluppo<\/td>\n<\/tr>\n<tr>\n<td>Firefox<\/td>\n<td>Flag<\/td>\n<td>Abilitabile manualmente<\/td>\n<\/tr>\n<\/table>\n<p>Per garantire la compatibilit&agrave; cross-browser, la strategia migliore &egrave; il polyfill progressivo: usi le animazioni CSS native come base (funzionano perfettamente su Chrome, Edge, Opera) e aggiungi un polyfill JS automatico per Safari e Firefox.<\/p>\n<h2>Implementazione in WordPress<\/h2>\n<p>Puoi aggiungere le animazioni CSS al tuo tema e applicare le classi ai blocchi Gutenberg. Per semplificare il processo, <a href=\"https:\/\/studioimmens.com\/en\/classyblocks-pro\/\">ClassyBlocks Pro<\/a> include 151 animazioni scroll-driven gi&agrave; pronte in 12 pack (Essential Scroll, Hero Effects, Text Effects, Mask &amp; Reveal e molti altri), con polyfill automatico per browser legacy e integrazione visuale in Gutenberg. Nessuna configurazione necessaria.<\/p>","protected":false},"excerpt":{"rendered":"<p>Le animazioni scroll-driven rappresentano una delle innovazioni pi&ugrave; significative nel mondo del CSS moderno. Con la propriet&agrave; animation-timeline: view(), puoi creare animazioni che si attivano e progrediscono in base alla posizione dello scroll dell&#8217;utente, senza una riga di JavaScript. In questa guida completa vedremo come funzionano, come implementarle in WordPress e come sfruttarle al massimo [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1239,"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":[21,40],"tags":[116,118,115,117],"ai_visibility":[],"class_list":["post-1163","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","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\/1163","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=1163"}],"version-history":[{"count":1,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1163\/revisions"}],"predecessor-version":[{"id":1183,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1163\/revisions\/1183"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media\/1239"}],"wp:attachment":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media?parent=1163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/categories?post=1163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/tags?post=1163"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/ai_visibility?post=1163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}