Generatore Animazioni CSS
Crea animazioni CSS con 16 preset. Personalizza durata, timing e ottieni codice pronto.
Proprietà Animazione
Codice CSS
Generatore Animazioni CSS
Genera animazioni CSS istantaneamente con il nostro builder visuale. 16 preset inclusi.
Strumenti popolari
Informazioni su Generatore Animazioni CSS
Sedici effetti keyframe pronti all'uso, tra cui bounce, shake, pulse, fade, slide, rotate, flip, swing, rubber band, jello, heartbeat, flash e zoom, si regolano qui con cursori e menu per durata, ritardo, numero di ripetizioni, direzione, funzione di temporizzazione e modalità di riempimento. Un quadrato di anteprima riproduce il risultato mentre modifichi ogni valore. Il pannello dell'output restituisce la regola @keyframes completa più la scorciatoia animation con il nome di animazione che hai scelto, pronta da copiare in un foglio di stile.
Casi d'uso
Come usare
Scegli un effetto dalla griglia di preset in alto: Bounce, Shake, Pulse, Fade In, Slide In Left, Rotate, Flip, Swing, Jello, Heart Beat, Zoom In e altri ancora.
Guarda il quadrato viola nel pannello di anteprima che ripete l'effetto, poi trascina i cursori Duration e Delay per impostare i tempi in secondi.
Scegli un Iteration Count di 1, 2, 3, 5 o Infinite e una Direction tra Normal, Reverse, Alternate o Alternate Reverse.
Imposta la Timing Function - Ease, Ease In, Ease Out, Ease In Out, Linear, Step Start o Step End - e un Fill Mode tra None, Forwards, Backwards o Both.
Rinomina i keyframe nel campo Animation Name, così la regola non può entrare in conflitto con il CSS già presente sul tuo sito.
Prendi la shorthand su una riga mostrata sopra il pannello del codice, oppure premi Copy per copiare l'intero blocco @keyframes insieme alla regola .animated-element.
Suggerimenti Pro
- Incolla direttamente il tuo contenuto: il Generatore di animazioni CSS riconosce i formati di input più comuni e applica automaticamente impostazioni predefinite sensate.
- Usa le scorciatoie da tastiera (Ctrl/Cmd+A per selezionare tutto, Ctrl/Cmd+C per copiare) per velocizzare il lavoro nel Generatore di animazioni CSS.
- Se gli input sono molto grandi, suddividili in blocchi: la maggior parte delle schede del browser gestisce megabyte di testo, ma l'analisi di dati molto voluminosi può bloccare brevemente l'interfaccia.
- Il Generatore di animazioni CSS non registra né conserva ciò che inserisci. Se ti serve uno storico, copia i risultati importanti in un file locale o in un'app per appunti.
- Combina il Generatore di animazioni CSS con gli altri strumenti del sito (formattatori, convertitori, encoder) per creare pipeline di dati complete senza uscire dal browser.
Domande frequenti
Sì, è completamente gratuito: nessuna registrazione, nessuna chiave API, nessun watermark e nessun limite di utilizzo.
No. Il Generatore di animazioni CSS funziona interamente lato client, nel tuo browser. Ciò che inserisci non passa mai dai nostri server.
Non c'è un limite rigido, ma con input superiori a qualche megabyte è normale un rallentamento, a seconda della memoria del tuo dispositivo.
Sì. I risultati ottenuti con il Generatore di animazioni CSS sono tuoi e puoi usarli liberamente in qualsiasi progetto personale o commerciale.
Gran parte della logica gira in JavaScript lato client, quindi dopo il caricamento iniziale puoi spesso continuare a lavorare senza connessione di rete.
Nessuno. Poiché il Generatore di animazioni CSS funziona nel tuo browser, puoi elaborare tutti gli input che il tuo hardware consente, senza chiavi API né limitazioni.