Vai al contenuto
TextArray1.87.0
100% locale

Generatore di animazioni CSS

Converti passi percentuale;proprietà:valore in un blocco @keyframes e il suo shorthand di animazione.

Ingresso
Uscita
Strumenti correlati
Generatore di gradienti CSSStrumenti per sviluppatori
Generatore di box-shadow CSSStrumenti per sviluppatori
Generatore CSS gridStrumenti per sviluppatori
Differenza chiave i18nStrumenti per sviluppatori
Convertitore da TOML a JSONStrumenti per sviluppatori
SQL in JSONStrumenti per sviluppatori
Generatore di animazioni CSS
Incolla i passi keyframe come percentuale;proprietà:valore — una riga per fermata, come 0;opacity:0 seguito da 100;opacity:1 — e questo strumento assembla un blocco @keyframes completo più la corrispondente dichiarazione di shorthand dell'animazione. Aggiungi più coppie proprietà:valore sulla stessa riga, separate da punti e virgola, per animare più di una proprietà a quella fermata, e riutilizza una percentuale su più righe per continuare a aggiungere proprietà ad essa.
Scegli un preset — fade, slide, pulse, shake o bounce — per saltare la scrittura manuale dei passi e ottenere un'animazione pronta con tutte le opzioni ancora regolabili, o cambia il preset a personalizzato per controllare ogni fermata dal tuo input. Le opzioni rimanenti formano lo shorthand dell'animazione: il nome imposta l'identificatore condiviso dalla regola @keyframes e dalla dichiarazione dell'animazione, la durata e il ritardo sono in secondi, e la funzione di timing copre ogni parola chiave standard più una curva cubic-bezier() personalizzata per una forma di easing esatta. Imposta l'animazione per ripetersi un numero fisso di volte o attiva infinite, scegli una direzione (normal, reverse, alternate, alternate-reverse) e una fill mode per ciò che accade prima e dopo l'esecuzione, e attiva l'opzione di prefisso webkit per emettere anche un blocco @-webkit-keyframes e una riga -webkit-animation per versioni più vecchie di Safari e Android WebView.
I valori di percentuale al di fuori di 0–100 sono bloccati nell'intervallo, "from" e "to" sono accettati come alias per 0 e 100, e le righe vuote o malformate vengono saltate anziché interrompere l'output. Il totale sotto l'output riporta quante fermate keyframe sono state generate e il conteggio esatto dei caratteri.
Tutto viene eseguito localmente nel tuo browser mentre digiti — nessun dato CSS o animazione viene mai inviato a un server. Copia il risultato, scaricalo come file .txt, o invia l'output di nuovo all'input per continuare a perfezionare i passi.
FAQ
Come appare veramente il formato di input?
Una riga per fermata keyframe: una percentuale, un punto e virgola, poi proprietà:valore. Aggiungi più coppie proprietà:valore sulla stessa riga, ciascuna separata da un punto e virgola, per animare più proprietà contemporaneamente — ad esempio 50;opacity:0.5;transform:scale(1.1).
Cosa succede quando scelgo un preset come fade o bounce?
Lo strumento utilizza un insieme integrato di passi keyframe per quel preset e ignora tutto ciò che si trova nella casella di input, mentre tutte le altre opzioni — nome, durata, timing, direzione e così via — si applicano ancora. Passa a personalizzato per usare di nuovo il tuo input.
Come ottengo una curva di easing personalizzata esatta?
Imposta la funzione di timing su personalizzato e inserisci quattro numeri separati da virgole nel campo cubic-bezier, come 0.25, 0.1, 0.25, 1. Un valore non valido ritorna a ease piuttosto che produrre CSS non valido.
Qual è la differenza tra numero di iterazioni e infinito?
Il numero di iterazioni imposta quante volte l'animazione viene riprodotta prima di fermarsi. L'attivazione di infinite ignora questo e ripete l'animazione indefinitamente.
I miei dati di animazione vengono caricati da qualche parte?
No. Il blocco @keyframes e lo shorthand dell'animazione vengono generati interamente nel tuo browser — niente di quello che digiti lascia mai il tuo dispositivo.