Generatore di animazioni CSS
Genera regole CSS con direttive keyframes e proprietà di animazione configurando nome, durata, andamento, direzione e riempimento.
Esegui lo strumento
Questo strumento genera frammenti di codice CSS completi per animare elementi dell'interfaccia web. Puoi personalizzare il nome della regola, la durata complessiva in secondi, la funzione di andamento temporale, la direzione di riproduzione e la modalità di riempimento. Il generatore produce due blocchi distinti di codice: la direttiva dei fotogrammi chiave `@keyframes` e la dichiarazione sintetica `animation` da includere nel selettore desiderato. I fotogrammi combinano una dissolvenza in ingresso da zero a cento percento con una traslazione verticale che parte da venti pixel verso il basso fino alla posizione finale a riposo. Se lasci il campo del nome vuoto durante la configurazione, l'utilità impiega un identificatore predefinito. Copia il testo generato nel foglio di stile per applicare l'effetto a schede informative, riquadri o menu a comparsa senza scrivere manualmente la sintassi di base.
Istruzioni
- Inserisci il nome dell'animazione desiderato oppure lascia il campo vuoto per usare l'identificatore predefinito.
- Indica la durata in secondi dell'effetto.
- Specifica la funzione di andamento temporale come ease, linear o un valore supportato da CSS.
- Definisci la direzione del ciclo di animazione e la modalità di riempimento per gli stati iniziale e finale.
- Avvia la generazione per visualizzare il blocco CSS con i fotogrammi chiave e la regola per l'elemento.
- Copia il codice ottenuto e incollalo nel tuo foglio di stile CSS.
Esempi
- Configurazione base: nome 'fadeIn', durata 1 secondo, andamento 'ease', direzione 'normal' e riempimento 'none'.
- Animazione persistente: nome 'slideUp', durata 2.5 secondi, andamento 'ease-in-out', direzione 'alternate' e riempimento 'forwards'.
FAQ
Quale effetto visivo applicano i fotogrammi generati?
La sequenza varia l'opacità da 0 a 1 e sposta l'elemento da una traslazione verticale di 20px verso il basso fino alla posizione 0px iniziale.
Cosa accade se non indico il nome dell'animazione?
Se lasci il campo vuoto, il generatore assegna automaticamente il nome predefinito myAnimation prima di comporre la direttiva CSS.
In quale unità di misura viene impostata la durata?
Il valore numerico inserito per la durata riceve automaticamente il suffisso in secondi 's' all'interno della proprietà CSS generata.
Posso inserire valori di easing personalizzati?
Sì, puoi digitare parole chiave standard CSS come linear, ease-in, ease-out oppure definizioni come cubic-bezier.