Generatore di animazione CSS

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 stenografia in ordine sicuro con il nome del fotogramma chiave prima, lascia cadere il ritardo quando è zero e lascia fuori direzione quando è normale e la modalità di riempimento quando non è nessuna, quindi l'output rimane leggibile Il conteggio delle iterazioni e la funzione di temporizzazione sono sempre scritti, anche ai loro valori predefiniti 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.

Ecco cosa produce questo generatore di animazione CSS per un preset, in modo da poterlo verificare rispetto alla propria copia Fare clic su Rimbalzo e i controlli caricano 1200 ms, facilità e Infinito, mentre la modalità di riempimento rimane al suo default di entrambi Copia CSS ti dà la regola di rimbalzo a sette stop @keyframes più una regola a 0 elementi animati contenente animazione: rimbalzo 1.2s facilità infinite entrambe; Trascinare Ritardo a 300 ms e la stenografia diventa rimbalzo 1.2s facilità 0.3s infinite entrambe, con il ritardo posto dopo la funzione di temporizzazione Qualsiasi generatore di animazione uscita CSS dovrebbe seguire quell'ordine, perché il primo valore temporale viene sempre letto come durata.