Generatore di animazioni CSS

Come usare

1. Scegli una preimpostazione di animazione: seleziona tra le animazioni comuni, dissolvenza, scorrimento, rimbalzo, rotazione, pulsazione, scossa e altro.
2. Personalizza la durata e il comportamento: regola durata, ritardo, funzione di easing, numero di iterazioni e fill mode.
3. Copia il CSS: la definizione @keyframes completa e la proprietà abbreviata animation sono pronte da incollare nel tuo foglio di stile.

Perché usare il generatore di animazioni CSS?

Le animazioni CSS danno vita alle interfacce, attirando l'attenzione sugli elementi chiave, dando feedback visivo e creando esperienze utente curate. Scrivere regole @keyframes a mano richiede di conoscere la giusta sintassi, i nomi delle curve e le buone combinazioni di proprietà. Questo generatore propone preimpostazioni di animazione curate con anteprima dal vivo e ti lascia regolare ogni parametro, producendo CSS pronto per la produzione senza JavaScript né libreria di animazione.

Funzionalità

• Preimpostazioni di animazione: dissolvenza, scorrimento, rimbalzo, rotazione, pulsazione, scossa, capovolgimento, zoom, ecc., tutte con anteprima dal vivo.
• Editor di keyframe personalizzato: costruisci la tua animazione da zero con un'interfaccia visiva.
• Controllo del timing: regola durata (ms/s), ritardo, curva (linear, ease, cubic-bezier) e numero di iterazioni.
• Modalità di riempimento: controlla i comportamenti forwards, backwards, both e none.
• Nessun JavaScript necessario: tutte le animazioni generate sono in puro CSS, nessuna libreria né framework.

Domande frequenti

Qual è la differenza tra animation e transition in CSS?

Le transizioni CSS si attivano su cambiamenti di stato (hover, focus, alternanza di classe) e animano tra due stati. Le animazioni CSS usano @keyframes per definire più stati e funzionano indipendentemente dall'interazione utente, possono fare loop, invertirsi e avviarsi automaticamente.

Cos'è animation-fill-mode e perché è importante?

animation-fill-mode controlla se l'elemento conserva gli stili dell'animazione prima che inizi (backwards), dopo che è terminata (forwards), o entrambi. Senza forwards, l'elemento torna bruscamente al suo stile originale alla fine dell'animazione.

Le animazioni CSS sono performanti?

Le animazioni che usano solo transform e opacity sono accelerate dalla GPU e molto fluide. Evita di animare proprietà di layout come width, height, margin o top/left, attivano ricalcoli di layout e possono causare scatti. Resta su transform e opacity per il 60 fps.

Cosa fanno effettivamente le animazioni CSS

Le animazioni CSS interpolano una o più proprietà CSS tra keyframe definiti nel tempo, producendo movimento o cambiamento visibile senza JavaScript. Il modello ha due pezzi: le regole @keyframes definiscono come appare un'animazione in passi basati su percentuali (da 0% a 100%), e la proprietà shorthand animation (o i suoi parenti longhand animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-fill-mode) dice al browser come riprodurre quella definizione di keyframes. Il browser gestisce tutta l'interpolazione, l'easing e il timing dei frame in C++, tipicamente accelerato dalla GPU per i cambiamenti di transform e opacity.

Le animazioni differiscono dalle transizioni CSS in due modi. Le transizioni si attivano quando lo stato di un elemento cambia (un hover, un toggle di classe, un evento focus) e interpolano tra esattamente due valori: il vecchio e il nuovo. Le animazioni funzionano indipendentemente dallo stato, seguono un numero arbitrario di passi di keyframe, possono andare in loop indefinitamente, possono essere riprodotte al contrario, e possono essere attivate, messe in pausa e riprese tramite CSS o JavaScript. Le transizioni sono lo strumento giusto per "scatto da A a B in mezzo secondo"; le animazioni sono lo strumento giusto per "esegui in loop questo pulse che attira l'attenzione per sempre" o "riproduci questa sequenza di ingresso una volta quando l'elemento appare".

Per il web design moderno, le animazioni CSS sostituiscono un'enorme quantità di ciò che una volta richiedeva librerie JavaScript. Spinner, fade-in, slide-up, pulse di attenzione, segni di spunta di successo: tutti sono ora pattern CSS standard. Il compromesso è l'espressività per sequenze complesse. Le animazioni CSS possono fare molto ma smettono di essere convenienti intorno ai 5-7 passi di keyframe con cambi di proprietà sincronizzati; per animazioni con storyboard, sequenze legate allo scroll, o qualsiasi cosa dinamica che dipende dallo stato JavaScript, le librerie dedicate (GSAP, Framer Motion, Web Animations API) rimangono la scelta migliore.

Come funziona questo strumento sotto il cofano

Quando scegli un preset (es. "bounce" o "fade-in") lo strumento carica una stringa @keyframes predefinita nell'area di anteprima e applica la proprietà animation alla casella di anteprima. I keyframe sono CSS reali, non un formato personalizzato: quello che vedi è quello che ottieni da copiare. Gli slider aggiornano i valori di timing dell'animazione (duration, delay, iteration count) modificando la proprietà animation inline in tempo reale, quindi l'anteprima riflette ogni modifica istantaneamente senza ricaricare la pagina.

La selezione della funzione di easing usa i valori standard CSS timing-function: linear (velocità costante), ease (default, inizio e fine lenti), ease-in (inizio lento), ease-out (fine lenta), ease-in-out (inizio e fine lenti), o cubic-bezier(x1, y1, x2, y2) per curve personalizzate. La curva di animazione visibile è calcolata dall'implementazione nativa della timing-function del browser; l'anteprima è l'output effettivo renderizzato dal browser, non una simulazione JavaScript.

La casella del codice mostra il CSS completo di cui hai bisogno per inserire in un foglio di stile: sia il blocco @keyframes che la dichiarazione .your-class { animation: ... }. Clicca "Copia CSS" e entrambi vengono scritti negli appunti come un singolo blocco di testo. Non viene generato alcun file, nessun server elabora nulla, e lo strumento non ha un backend da chiamare. L'anteprima, la generazione del codice e la scrittura negli appunti avvengono tutti in JavaScript sul tuo dispositivo. Aggiorna la pagina e la tua configurazione personalizzata è persa a meno che tu l'abbia copiata prima.

Breve storia dell'animazione web

• Flash domina il movimento web, dal 1996 al 2010.Adobe Flash (originariamente Macromedia) è lo strumento principale per l'animazione web per tutti i primi anni 2000. Vettoriale, basato su timeline, con un runtime plugin personalizzato. Entro il 2010, Flash alimenta la maggior parte dei banner pubblicitari, il lettore video di YouTube e i giochi dell'era Newgrounds. Poi i dispositivi mobili lo uccidono: l'iPhone non ha mai supportato Flash, Android abbandona il supporto nel 2012, i browser deprecano il plugin entro il 2020.
• Transizioni CSS in WebKit, 2007.Il motore WebKit di Apple distribuisce -webkit-transition nel 2007, la prima primitiva di animazione CSS comunemente distribuita. Usata pesantemente nelle prime web app per iPhone. Entro il 2009 la proprietà è nel processo di specifica CSS e viene distribuita senza prefisso tra i browser entro il 2014.
• CSS Animations Module Level 1, 2009.WebKit aggiunge -webkit-animation e @-webkit-keyframes a marzo 2009 prima della bozza W3C CSS Animations Module Level 1 (anche 2009). Firefox segue nella versione 5 (2011), IE nella versione 10 (2012). Inizia l'era "nessun JavaScript necessario per animazioni di base".
• GSAP e librerie di animazione JS, dal 2008 in poi.Il metodo .animate() di jQuery (2006) avvia l'era delle librerie di animazione JS; GreenSock Animation Platform (GSAP, lanciato nel 2008) diventa il gold standard per animazioni sequenziali complesse, scrubbing della timeline e prestazioni. Usato in siti di marketing di Disney, Coca-Cola e di livello Awwwards. Continua a coesistere con le animazioni CSS: GSAP per la complessità sequenziale, CSS per la semplicità dichiarativa.
• Web Animations API standardizzata, dal 2014 al 2018.La specifica W3C Web Animations fornisce un'API JavaScript che espone le animazioni CSS e aggiunge il controllo programmatico: element.animate(keyframes, options). Chrome distribuisce nella versione 36 (2014), Firefox nella versione 75 (2020), Safari nella versione 13.1 (2020). Colma il divario tra CSS dichiarativo e JavaScript con piena potenza di libreria.
• Le animazioni guidate dallo scroll arrivano, dal 2023 al 2024.Il modulo CSS Scroll-driven Animations introduce animation-timeline, permettendo alle animazioni CSS di legarsi alla posizione dello scroll invece di (o in aggiunta al) tempo. Chrome 115 (luglio 2023) distribuisce per primo; Safari e Firefox aggiungono il supporto attraverso il 2024 e il 2025. Sblocca effetti parallasse, indicatori di progresso dello scroll e animazioni di rivelazione di sezioni in puro CSS.

Flussi di lavoro del mondo reale

• Spinner di caricamento e stati skeleton.Un caricatore rotante (animation: spin 1s linear infinite con un keyframe di rotazione di 360 gradi) è l'uso più comune dell'animazione CSS. Le schermate skeleton con un effetto shimmer scorrevole usano un'animazione translateX o background-position. Entrambi sono essenziali per le prestazioni percepite: mentre il contenuto si carica, l'animazione dice agli utenti "stiamo lavorando" piuttosto che "è rotto".
• Micro-interazioni hover e focus.Pulsanti che pulsano sottilmente al passaggio del mouse, schede che si sollevano al focus, icone che oscillano al click: queste micro-interazioni aggiungono personalità senza essere invadenti. Usa animazioni con animation-iteration-count: 1 e animation-fill-mode: forwards per il comportamento "riproduci una volta e rimani", o transizioni per i pattern "scatto allo stato hover".
• CTA che attirano l'attenzione.Un pulsante di call-to-action primario con un'animazione di pulse lento e continuo o di breathing-glow attira l'occhio senza essere aggressivo. Combina transform: scale(1) to scale(1.05) con animation-iteration-count: infinite e una durata di 3-4 secondi per un ritmo calmo e di respirazione. Evita pulse più veloci; sembrano frenetici e infastidiscono rapidamente gli utenti.
• Ingresso pagina e rivelazione di sezione.Le animazioni fade-in e slide-up al caricamento della pagina o allo scroll-into-view creano arrivi raffinati. Il CSS gestisce il caso semplice (animazioni che vengono eseguite una volta al caricamento); per ingressi attivati dallo scroll, IntersectionObserver in JavaScript aggiunge una classe che attiva l'animazione quando un elemento entra nel viewport. Le moderne animazioni guidate dallo scroll stanno iniziando a sostituire questo pattern in puro CSS.
• Feedback di successo e shake di errore.Il feedback di invio del modulo usa indizi di animazione: un salvataggio riuscito mostra un segno di spunta verde con una breve animazione bounce-in, mentre un errore fa tremare brevemente il modulo (keyframe translateX che alternano -10px e +10px in 0,4 secondi). Questi piccoli tocchi fanno sembrare le interazioni reattive e intenzionali.
• Hero marketing e sequenze di storytelling.Le landing page e le sezioni hero usano spesso animazioni di ingresso a stadi (logo che entra in dissolvenza, headline che scorre su, pulsante CTA che pulsa) per focalizzare l'attenzione attraverso una sequenza progettata. I ritardi di animazione (animation-delay: 0s, 0.3s, 0.6s) su tre elementi fratelli creano un effetto sfalsato senza bisogno di orchestrazione JavaScript.

Trappole comuni e cosa significano

• Animare proprietà di layout uccide le prestazioni.Proprietà come width, height, margin, padding, top, left, right, bottom e font-size attivano il ricalcolo del layout ad ogni frame dell'animazione, spesso causando jank o prestazioni sotto i 60fps. Usa transform: translateX() invece di left, transform: scale() invece di width/height e opacity invece di visibility. Transform e opacity sono composti dalla GPU e non attivano il layout.
• Ignorare prefers-reduced-motion danneggia l'accessibilità.Alcuni utenti sperimentano cinetosi o disturbi vestibolari attivati dalle animazioni web. La media query prefers-reduced-motion: reduce permette agli utenti di rinunciare a livello di sistema operativo. Avvolgi le tue animazioni decorative in @media (prefers-reduced-motion: no-preference) { ... } o imposta animation-duration: 0.01ms per gli utenti che richiedono movimento ridotto. Le animazioni essenziali (spinner di caricamento) possono restare, ma quelle decorative dovrebbero rispettare la preferenza.
• L'uso eccessivo di will-change danneggia la memoria.La proprietà will-change suggerisce al browser di promuovere alla GPU un elemento in anticipo, il che può rendere fluide le animazioni. Ma aggiungere will-change a molti elementi consuma una memoria GPU significativa. Applicalo solo agli elementi che animi effettivamente, idealmente aggiunto tramite JavaScript proprio prima dell'inizio dell'animazione e rimosso dopo. Impostare will-change: transform su ogni elemento della pagina è un antipattern.
• Confusione su animation-fill-mode.Per default, un elemento torna al suo stile originale dopo che un'animazione finisce. Per mantenere lo stato finale dell'animazione, usa animation-fill-mode: forwards. Per far iniziare l'elemento nel primo stato dell'animazione prima che il ritardo trascorra, usa backwards. Per fare entrambi, usa both. Molti bug "perché il mio elemento torna indietro?" vengono dal mancare questa proprietà. Il valore predefinito è none, che raramente è quello che vuoi per animazioni di ingresso one-shot.
• Le animazioni infinite consumano la batteria mobile.Un'animazione animation-iteration-count: infinite funziona per sempre, mantenendo la GPU attiva e la frequenza di aggiornamento dello schermo al massimo. Sui dispositivi mobili, questo scarica notevolmente la batteria. Per le animazioni continue decorative (un logo che respira delicatamente), considera di mettere in pausa l'animazione quando la pagina è nascosta (document.visibilityState !== 'visible'), o limitare il conteggio delle iterazioni a un numero finito come 3-5 invece di infinito.
• Conflitti di nomi di keyframe su larga scala.I nomi delle regole @keyframes sono globali all'interno di un foglio di stile: @keyframes fade in un file collide con @keyframes fade in un altro. Per basi di codice grandi, usa un namespace per i tuoi nomi di keyframe (@keyframes app-fade-in, @keyframes hero-slide-up) per evitare sovrascritture silenziose. CSS modules e librerie CSS-in-JS gestiscono questo automaticamente con scope-hashing.

Privacy: tutto funziona nel tuo browser

Gli strumenti generatori CSS vengono in due sapori: semplici pagine HTML che eseguono JavaScript lato client (private, veloci) ed editor cloud che salvano i tuoi progetti (collaborativi ma con compromessi sulla privacy). Questo strumento è del primo tipo. I valori dei tuoi slider, il tuo preset selezionato, il tuo CSS generato: tutto resta nella tua sessione del browser. Aggiorna la pagina e lo stato è perso a meno che tu abbia copiato il CSS prima. Nessun server memorizza le tue scelte di animazione, nessuna analitica traccia quali preset hai testato e non è necessario alcun account.

La proprietà della privacy conta principalmente per il lavoro di design proprietario. Uno studio che prototipa animazioni per un progetto cliente confidenziale, uno sviluppatore che lavora sulle micro-interazioni di un'app non ancora annunciata, o un designer che itera su una campagna di brand: qualsiasi contesto in cui la storia delle iterazioni o il design in corso potrebbero far trapelare informazioni sul lavoro. Con questo strumento, non c'è nulla catturato perché nulla viene inviato. Apri la scheda Rete del browser e vedrai zero richieste in uscita durante l'uso; solo il caricamento iniziale della pagina recupera l'HTML e JavaScript.

Quando un altro strumento è la scelta giusta

• GSAP per animazioni sequenziali complesse.GreenSock Animation Platform (GSAP) gestisce animazioni sincronizzate, sequenziali e scrubbabili molto meglio del puro CSS. Per animazioni di marketing con storyboard, sequenze legate allo scroll con capacità di reverse, o qualsiasi cosa che dipenda dai cambiamenti di stato JavaScript, GSAP è lo standard del settore. Gratuito per la maggior parte dei casi d'uso (con una licenza club per alcuni plugin).
• Lottie per animazioni create da designer.Lottie (originariamente di Airbnb) rende le animazioni After Effects come JSON, permettendo ai designer di creare movimento complesso in After Effects ed esportare direttamente in web/iOS/Android. Per animazioni che superano ciò che i keyframe codificati a mano possono praticamente produrre (animazioni di personaggi, morphing complesso, sequenze di illustrazione), il pipeline design-to-code di Lottie vince sull'animazione CSS manuale.
• Web Animations API per il controllo JavaScript.Se hai bisogno di avviare, mettere in pausa, invertire o modificare le animazioni da JavaScript a runtime, la Web Animations API (element.animate(keyframes, options)) è più ergonomica del gestire classi CSS. Restituisce un oggetto Animation con metodi come .pause(), .play(), .reverse() e una Promise .finished. Supporto nativo del browser, nessuna libreria necessaria.
• requestAnimationFrame per i loop di gioco.Per animazioni guidate da logica JavaScript continua (loop di gioco, simulazioni di fisica, visualizzazioni di dati in tempo reale), requestAnimationFrame con aggiornamenti manuali delle proprietà per frame è l'approccio giusto. Le animazioni CSS sono dichiarative e predefinite; rAF ti dà il controllo per frame su cosa aggiornare. Usa Canvas o WebGL quando hai bisogno anche del controllo a livello di pixel.

Altre domande frequenti

Come faccio a far riprodurre un'animazione solo una volta?

Imposta animation-iteration-count: 1 (che è il default se non specificato). Per fare in modo che l'elemento rimanga nello stato finale dell'animazione dopo che si completa (invece di tornare indietro allo stile originale), imposta anche animation-fill-mode: forwards. Lo shorthand combinato è animation: fadeIn 0.5s ease-out forwards;.

Posso mettere in pausa e riprendere un'animazione?

Si, con animation-play-state: paused (o running). Attiva/disattiva questa proprietà tramite JavaScript (es. al click di un pulsante) o in CSS tramite :hover per i pattern "pausa al passaggio del mouse". L'animazione si blocca al suo punto attuale e riprende da li quando è impostata di nuovo su running, senza progresso perso. Questo funziona allo stesso modo nelle transizioni ma solo la proprietà animation-play-state esiste per il controllo di pausa a runtime.

Come faccio ad attivare un'animazione al click o allo scroll?

Per i trigger di click, attiva/disattiva una classe CSS tramite JavaScript: element.classList.toggle('animate-in'). L'animazione viene eseguita quando la classe viene aggiunta. Per i trigger di scroll, usa IntersectionObserver per rilevare quando l'elemento entra nel viewport e aggiungi la classe allora. Per i browser moderni, le animazioni CSS guidate dallo scroll ti permettono di legare il progresso dell'animazione direttamente alla posizione dello scroll senza JavaScript tramite animation-timeline: scroll().

Perché la mia animazione sfarfalla o balbetta?

La maggior parte dei problemi di sfarfallio/balbettio viene dall'animare proprietà che attivano il layout (width, height, top/left) invece di equivalenti basati su transform. Cambia left: 0 in transform: translateX(0) e l'animazione dovrebbe diventare fluida. Altre cause: overdraw da molti livelli semi-trasparenti, layout thrashing da JavaScript che legge e scrive stili nello stesso frame, o ombre e filtri eccessivi sull'elemento animato.

Dovrei usare le animazioni su interfacce critiche per l'accessibilità?

Usale, ma rispetta prefers-reduced-motion. Le linee guida WCAG 2.1 raccomandano di fornire l'opzione di disabilitare il movimento non essenziale. Avvolgi le animazioni decorative in @media (prefers-reduced-motion: no-preference) cosi gli utenti che impostano la preferenza del sistema operativo ottengono un'esperienza statica. Le animazioni di feedback essenziali (indicatori di caricamento, shake di errore) possono essere mantenute; quelle puramente decorative dovrebbero essere opt-in per utenti sensibili.

Posso usare cubic-bezier per curve di easing personalizzate?

Si. La funzione di timing cubic-bezier(x1, y1, x2, y2) ti permette di definire qualsiasi curva di easing con due punti di controllo. Ogni valore x è tra 0 e 1 (che rappresenta il tempo), i valori y possono essere negativi o maggiori di 1 (permettendo effetti di overshoot e bounce). Usa il nostro strumento Cubic Bezier o il classico cubic-bezier.com di Lea Verou per scegliere una curva visivamente. Alternative preset comuni: ease, ease-in, ease-out, ease-in-out, e le variabili CSS linear-aliased cubic-bezier(0.25, 0.1, 0.25, 1) (ease predefinito).