Come generare un’animazione CSS fade-in con keyframe personalizzabili

Perché usare questo generatore CSS

Questo generatore produce testo CSS per un’animazione basata su keyframe e comprende anche la dichiarazione da associare a un elemento. È adatto quando vuoi preparare un’entrata con dissolvenza e movimento verticale partendo da una struttura già definita, senza dover ricostruire manualmente la sintassi di base. I controlli disponibili riguardano il nome dell’animazione, la durata, la funzione di easing, la direzione e la modalità di riempimento. Quando non inserisci un valore, il generatore utilizza fadeIn per il nome, 1 per la durata, ease per l’easing, normal per la direzione e none per il riempimento.

Procedura per impostare l’animazione

1. Individua i controlli relativi all’animazione e inserisci il nome che vuoi richiamare nel foglio di stile. Un nome come entrata rende immediato il collegamento tra la regola di keyframe e la dichiarazione applicata all’elemento. Se il campo resta vuoto, il generatore sostituisce il nome con fadeIn, perciò verifica questo valore quando non hai fornito un nome esplicito.

2. Inserisci la durata come valore numerico, ad esempio 0.8 oppure 2. Nel testo CSS generato, il valore viene seguito dall’unità s: la prima scelta viene quindi riportata come 0.8s. Non confondere il numero inserito con una stringa già completa di unità, perché l’unità dei secondi viene aggiunta nella dichiarazione prodotta.

3. Seleziona o indica la funzione di easing, la direzione e la modalità di riempimento che vuoi vedere nella dichiarazione dell’elemento. Puoi conservare ease, normal e none oppure sostituirli con i valori adatti al tuo caso; anche il nome e la durata possono essere combinati con queste impostazioni.

4. Avvia la generazione e esamina il testo CSS restituito. Il risultato comprende una regola di keyframe e una dichiarazione di animazione per un elemento. Dopo averlo copiato nel foglio di stile del progetto, controlla che il nome richiamato dalla dichiarazione sia identico a quello usato nella regola di keyframe.

Come interpretare il testo prodotto

Per leggere il risultato, separa la regola di keyframe dalla dichiarazione destinata all’elemento. La prima descrive il passaggio iniziale e quello finale; la seconda riporta il nome dell’animazione insieme ai parametri che hai configurato. Il collegamento fra i due blocchi dipende dal nome, quindi una differenza anche minima nella grafia impedisce di riconoscere la stessa animazione nel foglio di stile.

La struttura generata prevede due punti: a 0%, l’opacità è 0 e la traslazione verticale misura 20px; a 100%, l’opacità diventa 1 e la traslazione verticale arriva a 0. Questo andamento corrisponde a un elemento che appare gradualmente mentre raggiunge la posizione finale. Durata, easing, direzione e riempimento modificano la dichiarazione dell’animazione, mentre le due fasi descritte restano la base del contenuto prodotto.

Prima di utilizzare il testo, confronta nome e parametri con l’effetto che stai preparando. Se hai lasciato un controllo omesso, considera i valori predefiniti invece di interpretarli come campi mancanti: il risultato può infatti contenere fadeIn, 1, ease, normal o none in base all’impostazione non fornita.

Esempio pratico

Vuoi preparare un’entrata con dissolvenza per un elemento che deve raggiungere la posizione finale in 0,8 secondi.

Imposta il nome su entrata, la durata su 0.8, l’easing su ease-in, la direzione su normal e la modalità di riempimento su forwards, poi genera il CSS.

Il testo restituito contiene keyframe denominati entrata, una fase iniziale con opacità 0 e traslazione verticale di 20px, una fase finale con opacità 1 e traslazione 0, oltre a una dichiarazione con durata 0.8s.

Limiti

• I keyframe generati comprendono due fasi con opacità e traslazione verticale; non risultano disponibili controlli verificati per aggiungere altre fasi o proprietà CSS alla struttura.

Errori comuni

• Un nome inatteso come fadeIn indica che il campo del nome è stato lasciato vuoto; inserisci il nome desiderato e genera di nuovo il testo CSS.

Domande frequenti

Posso personalizzare i parametri dell’animazione?

Sì, il generatore permette di fornire nome, durata, easing, direzione e modalità di riempimento; quando un valore non viene indicato, applica l’impostazione predefinita corrispondente.

Quale unità usa la durata?

La durata compare nella dichiarazione con l’unità s aggiunta al valore inserito, quindi 0.8 viene rappresentato come 0.8s.

Quale nome viene usato se lascio vuoto il campo?

Quando il campo del nome è vuoto, il testo CSS viene generato usando fadeIn come nome dell’animazione.