Generatore di animazione CSS
Costruisci animazioni di fotogrammi chiave CSS da preset come dissolvenza, diapositiva, rimbalzo e rotazione Regola durata, allentamento, ritardo, iterazione e direzione, visualizza l'anteprima dal vivo, quindi copia i fotogrammi chiave e la stenografia dell'animazione.
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animated-element {
animation: fadeIn 0.6s ease 1 both;
}Che cos'è il CSS Animation Generator?
Il generatore di animazione CSS è un editor visivo per animazioni di fotogrammi chiave CSS. Scegli un preset di movimento come dissolvenza in entrata, scorrimento, zoom, rimbalzo, rotazione o impulso, regola la durata, la funzione di temporizzazione, ritardo, conteggio dell'iterazione, direzione e modalità di riempimento, guardalo funzionare in un'anteprima live, quindi copia due cose: la regola @keyframes che definisce il movimento e la scorciatoia di animazione che lo riproduce Trasforma un blocco di CSS che la maggior parte delle persone copia dalla memoria o da un framework in qualcosa che puoi modellare e vedere prima che raggiunga il tuo foglio di stile.
Un'animazione CSS ha due metà che devono essere d'accordo La regola @keyframes nomina una sequenza di passaggi, ciascuno scritto come offset percentuale con i valori delle proprietà che l'elemento dovrebbe contenere in quel punto, ad esempio 0% all'opacità 0 e 100% all'opacità 1. La proprietà di animazione fa quindi riferimento al nome del fotogramma chiave e controlla come viene riprodotto: quanto dura, come si attende, quanto tempo aspettare prima di iniziare, quante volte ripetere e in quale direzione viene eseguito ogni passaggio. Un nome errato è la ragione più comune per cui un'animazione non fa silenziosamente nulla, perché il browser non ha regole a cui legarsi.
Tutto viene eseguito nel browser Scegliere un preset, trascinare i cursori di durata e ritardo, commutare la curva di allentamento, impostare l'animazione in modo che si ripeta per sempre o un numero fisso di volte e premere replay per guardarla di nuovo Lo strumento scrive la scorciatoia in ordine sicuro con il nome del fotogramma chiave prima, lascia cadere il ritardo quando è zero e omette qualsiasi parte che corrisponde al suo valore predefinito CSS in modo che l'output rimanga leggibile Non c'è account, non viene caricato nulla e il generatore continua a funzionare una volta caricata la pagina.
Inoltre rende visibili i compromessi in termini di prestazioni I preset animano la trasformazione e l'opacità ove possibile, perché queste due proprietà sono gestite dal compositore e non costringono il browser a ricalcolare il layout, quindi rimangono lisci a frame rate elevati. Animare larghezza, altezza, cima o margine ricalcola invece la pagina su ogni fotogramma ed è la solita causa di balbuzie. Vedere un rimbalzo costruito da translateY anziché dall'alto è una lezione più rapida sul perché si è lisci rispetto a qualsiasi quantità di lettura al riguardo.
Come utilizzare il CSS Animation Generator?
Scegliere un preset di animazione
Scegli un movimento dall'elenco preimpostato come dissolvenza in entrata, scorrimento in entrata, zoom, rimbalzo, rotazione, impulso o scuotimento Ogni preimpostazione carica i suoi fotogrammi chiave e una durata predefinita sensata e un allentamento.
Regolare i tempi e la riproduzione
Imposta la durata e il ritardo, scegli una funzione di temporizzazione, decidi se l'animazione si ripete un numero fisso di volte o all'infinito e scegli una direzione e una modalità di riempimento.
Anteprima e riproduzione
Guarda l'animazione eseguita sull'elemento di anteprima e premi Replay per riavviarla Poiché un'animazione viene eseguita su mount, Replay rimonta l'elemento in modo da poterlo vedere tutte le volte che vuoi.
Copia il CSS
Copia insieme la regola @keyframes generata e la scorciatoia di animazione, quindi incollale nel tuo foglio di stile e applica la classe a qualsiasi elemento.
Caratteristiche principali
Libreria preimpostata del fotogramma chiave
Quattordici movimenti già pronti che coprono ingressi, uscite ed effetti di looping, da dissolvenza e scorrimento a rimbalzo, rotazione, impulso, agitazione, capovolgimento e battito cardiaco, ciascuno definito con veri e propri stop del fotogramma chiave
Controllo completo della riproduzione
Imposta durata, ritardo, funzione di temporizzazione, conteggio dell'iterazione, direzione, modalità di riempimento e stato di riproduzione e visualizza ogni modifica riflessa nella scorciatoia e nell'anteprima dal vivo contemporaneamente
Keyframe e stenografia insieme
L'output include sia la regola @keyframes che la scorciatoia di animazione che si lega ad essa, quindi copi un blocco completo e funzionante anziché la metà di uno
Uscita pulita e corretta per le specifiche
La stenografia viene scritta prima con il nome del fotogramma chiave, il ritardo diminuisce quando è zero e qualsiasi valore predefinito viene omesso, quindi il CSS generato legge il modo in cui lo scriveresti a mano
Frequently Asked Questions
Related Tools
CSS Grid Generator
Build CSS Grid layouts visually. Set columns, rows, track sizes, gaps and alignment with a live preview, then copy the generated grid CSS - all in your browser.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
Character Counter
Count characters, words, sentences and paragraphs live as you type, estimate reading time and byte size, and check your text against social media and SEO length limits.
Comments
0 comments
No comments yet. Be the first to share your thoughts!