# Loghi animati: modi semplici per dare vita a un logo [Canonical HTML page](https://gradiently.design/it/guide/animated-logo) L’animazione di un logo dovrebbe sembrare il logo che prende un respiro, non un numero di scena. Ecco le poche tecniche che funzionano e le regole che le tengono di buon gusto. ## The short version - Un logo animato è il logo di un brand con l’aggiunta di un breve movimento, come una comparsa, una linea che si disegna da sola, parti che si assemblano o un colore che cambia. - La maggior parte delle animazioni di logo per intro e outro funziona meglio con una durata di circa uno-tre secondi, terminando sull’esatto logo statico. - Basta un’idea per animazione, e il movimento dovrebbe rispecchiare la personalità del brand nello stesso modo dei suoi colori e dei suoi caratteri. - I siti possono animare i loghi con SVG e CSS o con file Lottie, mentre il video richiede MP4, le email la GIF e il montaggio un formato con trasparenza. - Ogni logo animato ha bisogno di una versione statica, per le dimensioni piccole, per la stampa e per chi preferisce meno movimento. Un **logo animato** è il tuo logo con un solo movimento breve e mirato: appare, disegna le proprie linee, si assembla dalle sue parti, cambia colore o respira piano in un loop. I migliori sono brevi, di solito da uno a tre secondi per un’intro, e finiscono sempre sull’esatto logo che le persone già conoscono. Pensalo come il logo che arriva, non che si esibisce. ## Cinque modi per animare un logo Quasi ogni buona animazione di logo è una di cinque tecniche, a volte due combinate. Scegli quella che si adatta alla forma del tuo logo e al carattere del brand. | Tecnica | Cosa succede | Adatta a | | --- | --- | --- | | Comparsa | Il logo appare con una dissolvenza, una tendina o una maschera | Qualsiasi logo; la scelta più sicura | | Tracciato | Le linee si disegnano da sole, poi si riempiono | Marchi a linea, monogrammi, firme | | Assemblaggio | Le parti scorrono o si ingrandiscono fino al loro posto | Loghi fatti di forme distinte | | Variazione | Un colore o un gradiente attraversa il logo | Loghi a gradiente e logotipi decisi | | Loop discreto | Un respiro o un luccichio sottile e senza fine | Stati di caricamento, schermi da palco, dirette | Parti dalla comparsa. Scendi lungo l’elenco solo quando la forma del logo te ne dà un motivo. ## Le regole che tengono di buon gusto un’animazione di logo L’animazione di un logo viene ripetuta molte volte: all’inizio di ogni video, a ogni caricamento di pagina, a ogni evento. Tutto ciò che è troppo ingegnoso stanca in fretta. È la sobrietà che permette di apprezzarla anche la centesima volta. [I principi del motion design](https://gradiently.design/it/guide/motion-design-principles) approfondisce il ragionamento. ### Da evitare - Animazioni più lunghe del messaggio che introducono - Far ruotare, rimbalzare o esplodere il logo - Finire su una posa che non è il vero logo - Un movimento che contraddice il carattere del brand - Una sola versione, senza alternativa statica ### Da fare - Da uno a tre secondi per intro e outro - Un’idea, eseguita in modo pulito - Finire sull’esatto logo statico e mantenerlo - I brand calmi si muovono piano, quelli vivaci possono essere svelti - Tenere un logo statico per le dimensioni piccole e la stampa Abbina il movimento al brand nello stesso modo in cui abbini colori e caratteri. Il logo di uno studio legale può apparire in dissolvenza in un secondo con un’accelerazione morbida. Quello di un festival musicale può scattare al suo posto con un piccolo rimbalzo. [La personalità del brand](https://gradiently.design/it/guide/brand-personality) ti aiuta a dare un nome al carattere, e [l’easing](https://gradiently.design/it/guide/easing) lo trasforma in curve. ## Come creare in SVG l’animazione di un logo che si disegna L’effetto tracciato usa un bel trucco dell’SVG. Un tratto può essere disegnato a trattini, e se un trattino è lungo quanto tutto il percorso, puoi farlo entrare in vista animando il suo scostamento. Impostare `pathLength="1"` sul percorso semplifica i calcoli: il percorso conta come lungo un’unità, qualunque sia la sua lunghezza reale. ```html ``` Un monogramma N come percorso unico. Il nome accessibile resta sull’SVG qualunque cosa faccia l’animazione. ```css .draw { stroke-dasharray: 1; stroke-dashoffset: 1; /* hidden: the dash starts one full length away */ animation: draw 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } /* drawn */ } @media (prefers-reduced-motion: reduce) { .draw { animation: none; stroke-dashoffset: 0; } } ``` La linea si disegna da sola in 1,2 secondi con un’accelerazione morbida in entrata e in uscita, e per chi preferisce meno movimento compare e basta. ## Animare un logo a gradiente I loghi a gradiente hanno un movimento già incorporato: lascia viaggiare il colore. Un lento scorrimento del gradiente dentro un logotipo o un’icona sembra luce che si muove sulla superficie, e tiene la forma perfettamente ferma, il che favorisce la leggibilità. Il trucco per un loop pulito è un gradiente che finisce sul colore da cui parte, così la ripetizione non ha giunture. Viola, rosa, viola: `linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%)` Un gradiente simmetrico. Fatto scorrere di lato esattamente per la sua larghezza, combacia con se stesso, così il luccichio si ripete all’infinito senza scatti. ```css .wordmark { background: linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; } @keyframes shimmer { to { background-position: 200% 0; } } @media (prefers-reduced-motion: reduce) { .wordmark { animation: none; } } ``` Il colore attraversa le lettere ogni sei secondi, a velocità costante, così il loop non esita mai. Il testo a gradiente ha le sue regole di leggibilità; vedi [testo a gradiente in CSS](https://gradiently.design/it/guide/css-gradient-text). E assicurati che il logo esista anche in un solo colore piatto, come spiega [i loghi a gradiente](https://gradiently.design/it/guide/gradient-logo). ## Quanto deve durare un logo animato - **Intro e outro video:** circa da uno a tre secondi, poi tieni fermo il logo finito per un momento. - **Intestazione del sito:** una sola volta, in fretta, alla prima visita; mai a ogni cambio di pagina. - **Stati di caricamento:** un loop discreto e lento che non sembri impaziente. - **Schermi da palco e dirette:** un loop molto lento, perché può restare a schermo per ore. Il logotipo Northlight al centro di un ampio sfondo a gradiente, come fotogramma finale di un’intro di logo L’ultimo fotogramma di un’intro dovrebbe essere il logo esattamente come appare ovunque, sullo sfondo abituale del brand. ## In quale formato esportare un logo animato | Dove viene riprodotto | Formato | Note | | --- | --- | --- | | Sito web o app | SVG con CSS, o un file Lottie | Nitido a ogni dimensione, file minuscoli, può rispettare la preferenza per meno movimento | | Video social | MP4 | Posizionato su uno sfondo; non serve la trasparenza | | Montaggio video | Un formato con trasparenza, come ProRes 4444 | Così chi monta può metterlo sopra qualsiasi filmato | | Firma email o newsletter | GIF | Tienila breve e leggera; il primo fotogramma dovrebbe essere il logo completo | | Presentazioni | MP4, o l’animazione dello strumento stesso | Prova sul computer che userai per presentare | Lottie è un formato di animazione JSON, spesso esportato da After Effects, che si riproduce nei player web e app. Per approfondire loop e tipi di file, vedi [GIF o MP4](https://gradiently.design/it/guide/gif-vs-mp4). E qualunque cosa esporti, abbinala a uno sfondo adatto: un logo animato su un campo fermo e calmo si legge meglio che su un filmato movimentato. [Mettere un logo su un gradiente](https://gradiently.design/it/guide/logo-on-gradient-background) tratta contrasto e posizione. ## FAQ ### Quanto deve durare un logo animato? Per intro e outro video, circa da uno a tre secondi, finendo sul logo statico e tenendolo fermo per un breve momento. I loop discreti per gli schermi possono essere più lunghi e più lenti. ### Qual è il modo più facile per animare un logo? Una semplice comparsa: una dissolvenza, una tendina o una maschera che scopre il logo in circa un secondo. Funziona con qualsiasi logo ed è difficile sbagliare. ### In che formato deve essere un logo animato? SVG con CSS o Lottie per siti e app, MP4 per i video social, un formato con trasparenza come ProRes 4444 per il montaggio e la GIF per le email. ### Come faccio a far disegnare un logo da solo? In SVG, imposta pathLength a 1 sul percorso, dagli uno stroke-dasharray di 1 e anima lo stroke-dashoffset da 1 a 0. ### Mi serve ancora un logo statico? Sì. Le dimensioni piccole, la stampa, le favicon e chi preferisce meno movimento hanno tutti bisogno della versione statica, e ogni animazione deve finire su di essa.