Animazione CSS vs Transizione: Spiegazione dei fotogrammi chiave

Ogni sviluppatore ha copiato un blocco di @keyframes da una risposta Stack Overflow, incollato, rinfrescato e trovato l'elemento perfettamente fermo Nove volte su dieci il motivo è noioso: il nome dell'animazione nel @keyframes la regola non corrispondeva al nome nel animation stenografia, o la durata è stata lasciata a zero, o la classe non è mai atterrata sull'elemento L'altro motivo è che l'animazione keyframe è uno di quegli angoli dei CSS dove non si può giudicare il risultato leggendo il codice Una sequenza di percentuali e trasforma non ti dice nulla sul fatto che il movimento si senta fluido, scattante o mal di mare finché non lo guardi correre.

Un'animazione CSS è il meccanismo browser's per spostare un elemento attraverso una sequenza di stili con nome nel tempo A differenza di una transizione, che anima una singola modifica e attende un trigger, un'animazione segue un @keyframes script con tutti i passaggi che vuoi, può girare in loop per sempre e inizia da solo nel momento in cui viene applicato È ciò che alimenta il caricamento di spinner, impulsi di attenzione, effetti di ingresso e ogni bit di movimento ambientale che fa sentire viva un'interfaccia Ma le due metà, i fotogrammi chiave e la stenografia, devono concordare esattamente, e la stenografia racchiude sette o otto valori in una riga in un ordine che la maggior parte delle persone non memorizza mai.

la Generatore di animazione CSS rimuove le congetture Scegli un movimento da una libreria di preset, regola la durata, l'allentamento, il ritardo, il conteggio e la direzione dell'iterazione e guardalo giocare su un elemento di anteprima dal vivo Lo strumento scrive sia il @keyframes regola e abbinamento animation abbreviazione in una casella pronta per la copia, con i nomi già sincronizzati, quindi il blocco che incolli funziona la prima volta.

tl; dr: Un'animazione CSS muove un elemento attraverso un @keyframes sequenza nel tempo, e a differenza di una transizione non ha bisogno di trigger e può loop Il @keyframes nome e il animation-name deve corrispondere esattamente, che è il singolo motivo più comune per cui un'animazione non fa nulla La scorciatoia porta nome, durata, temporizzazione-funzione, ritardo, iterazione-conteggio, direzione e fill-mode Preferisci animare transform e opacity per un movimento fluido e composto Questo generatore ti offre quattordici preset, il controllo completo della riproduzione e un'anteprima live ed emette insieme sia i fotogrammi chiave che la stenografia Funziona interamente nel tuo browser senza registrazione.

Che problema risolve un generatore di animazione CSS?

La cosa imbarazzante dell'animazione con fotogrammi chiave è il viaggio di andata e ritorno Per sintonizzare un rimbalzo a mano si scrive il @keyframes regola, scrivi il animation linea, salvare il file, passare al browser, attendere il ricaricamento, e guardare Se il rimbalzo è troppo aggressivo si cambia uno translateY valuta e fai di nuovo l'intero ciclo Poiché quel ciclo è lento, la maggior parte delle persone accetta la prima versione che non sembra rotta piuttosto che la versione che sembra giusta, e la differenza tra questi due è esattamente la lucidatura che separa un'interfaccia considerata da un modello.

Un generatore collassa che si avvolge in un singolo clic Scegli un preset, trascina il cursore della durata e l'elemento di anteprima riproduce immediatamente il movimento davanti a te Commuta la funzione di temporizzazione da ease a una curva più adula e il cambiamento di sensazione è istantaneo Imposta il conteggio delle iterazioni su infinito e i loop di animazione in modo da poterlo studiare Dopo pochi minuti di questo costruisci un'intuizione per come appaiono seicento millisecondi contro milleduecento, che è il senso che ti serve per prendere decisioni di buon movimento ovunque.

C'è anche un argomento di correttezza Non puoi produrre un malformato animation value scegliendo tra menu e trascinando i cursori, e non si può digitare erroneamente il nome del fotogramma chiave, perché lo strumento lega la stenografia ai fotogrammi chiave che ha generato L'output è sempre sicuro da incollare Quell'affidabilità è la stessa ragione per cui tengo vicini i builder CSS visivi per altre proprietà, lo stesso istinto dietro il raggiungimento per il generatore gradiente invece di contare il colore mi si ferma in testa, o il generatore box-shadow invece di indovinare i raggi di sfocatura.

In che modo un'animazione CSS è diversa da una transizione CSS?

Questo fa inciampare le persone costantemente, quindi vale la pena essere precisi Una transizione anima una singola proprietà tra due stati e richiede qualcosa per cambiare, un passaggio del mouse, un focus, una classe commutata, prima che venga eseguita Ha un valore iniziale e un valore finale e niente in mezzo Un'animazione, al contrario, segue un @keyframes regola che può definire un numero qualsiasi di passaggi intermedi, in modo che l'elemento possa muoversi attraverso un'intera coreografia piuttosto che una linea retta da A a B. Inoltre non aspetta nulla: applicalo e suona.

La conseguenza pratica è che si raggiunge una transizione quando si vuole appianare un cambiamento di stato, e per un'animazione quando si vuole un movimento che sia intrinseco all'elemento Un pulsante che si scurisce al passaggio del mouse è una transizione Uno spinner che ruota per sempre, un badge che pulsa per disegnare l'occhio, o una carta che scivola verso l'alto mentre la pagina si carica sono tutte animazioni, perché il movimento avviene da solo e spesso si ripete Se si sta ancora decidendo di quale un dato effetto ha bisogno, la regola pratica è semplice: se un'azione dell'utente la avvia e va in un modo, usa una transizione; se gioca da sola, gira o ha più di due passaggi, usa un'animazione Il Generatore di transizione CSS è lo strumento complementare per il primo caso e i due coprono la maggior parte del movimento che scriverai.

Aspetto	Transizione	Animazione
Trattore	Ha bisogno di un cambiamento di stato (hover, focus, class)	Inizia da solo quando applicato
Passi	Due, un inizio e una fine	Qualsiasi numero, tramite @keyframes
Looping	No, viene eseguito una volta per cambio	Sì, con iteration-count
Uso tipico	Effetti di passaggio del mouse e messa a fuoco	Filatori, legumi, ingressi

Qual è l'ordine corretto della stenografia dell'animazione?

la animation la stenografia è densa Può portare il nome del fotogramma chiave, la durata, la funzione di temporizzazione, il ritardo, il conteggio delle iterazioni, la direzione, la modalità di riempimento e lo stato di riproduzione, il tutto su una riga, e l'ordine conta per i due valori temporali esattamente nel modo in cui lo fa per le transizioni Questo generatore scrive prima il nome, poi la durata e la funzione di temporizzazione, quindi il ritardo opzionale, quindi il conteggio delle iterazioni, la direzione e la modalità di riempimento, per esempio animation: fadeIn 0.6s ease 1 both. Scrivere prima il nome è legale perché i nomi dei fotogrammi chiave non sono parole chiave CSS e si legge più chiaramente che seppellire il nome alla fine.

L'unica regola che cattura tutti sono i due valori temporali La durata e il ritardo sono entrambi tempi, e CSS li distingue solo per posizione: il primo valore temporale è la durata e il secondo è il ritardo Tutto il resto nella stenografia è una parola chiave o un numero senza unità, quindi non può essere confuso con un tempo Ecco perché lo strumento può tranquillamente far cadere il ritardo quando è zero, perché un numero senza unità 1 o la parola infinite quello che segue è inequivocabilmente il conteggio di iterazione, non una seconda volta Il generatore omette anche qualsiasi valore che equivale al suo default CSS, quindi un normal direzione o un none fill-mode non ingombra mai l'output Il risultato è una scorciatoia che legge il modo in cui lo scriveresti a mano una volta conosciute le regole.

Perché la mia animazione CSS non viene riprodotta?

Questa è la scogliera, e quasi tutti ci escono almeno una volta La singola causa più comune è una discrepanza tra il animation-name e il nome nel @keyframes regola. Un errore di battitura, una differenza di maiuscola o un nome che è stato rinominato in un punto e non nell'altro lascia il browser senza una regola del fotogramma chiave a cui legarsi, quindi non fa silenziosamente nulla Non c'è errore né avviso; l'elemento si trova semplicemente lì Poiché questo generatore scrive entrambe le metà insieme dallo stesso nome, l'intera classe di bug scompare, il che è gran parte del punto.

Le altre cause sono da conoscere perché si presentano quando si scrivono a mano le animazioni Una durata pari a zero significa che l'animazione viene completata istantaneamente e non la si vede mai Un elemento che è display: none non esegue affatto le sue animazioni, quindi una dissolvenza in apertura che dipende dall'elemento che viene renderizzato non si attiverà Una proprietà mancante o errata all'interno di un fotogramma chiave viene tranquillamente ignorata anziché contrassegnata E un'animazione con animation-fill-mode: none, l'impostazione predefinita, riporta l'elemento ai suoi stili unanimati nell'istante in cui finisce, il che può sembrare che non sia mai stato eseguito se il movimento era sottile. Guardando l'animazione in un'anteprima dal vivo, la maggior parte di questi emerge in pochi secondi, come nel caso della costruzione del movimento in cui puoi vederlo anziché in un file che continui a ricaricare.

Cosa fa animation-fill-mode?

La modalità Riempimento è l'impostazione che le persone comprendono per ultima e di cui hanno più bisogno Decide quali stili mostra l'elemento al di fuori della finestra attiva di animation's, sia prima che inizi durante qualsiasi ritardo, sia dopo che finisce L'impostazione predefinita, none, significa che l'elemento ignora il primo e l'ultimo fotogramma chiave quando l'animazione non è in esecuzione, quindi si trova nei suoi stili normali prima dell'animazione e torna indietro a loro dopo. Quello snap-back è la fonte di una frustrazione molto comune: animi un elemento in cui svanire, svanisce magnificamente, e poi svanisce di nuovo nel momento in cui l'animazione termina, perché con none la finale opacity: 1 keyframe viene scartato una volta terminata l'animazione.

La correzione è animation-fill-mode: forwards, che mantiene l'ultimo fotogramma chiave applicato al termine dell'animazione, in modo che l'elemento disattivato rimanga visibile. backwards applica il primo fotogramma chiave durante qualsiasi ritardo prima dell'avvio dell'animazione, il che è utile quando si ha un ritardo e non si desidera che l'elemento lampeggi prima nel suo stato predefinito. both fa entrambe le cose contemporaneamente ed è la scelta generale più sicura per le animazioni di ingresso, motivo per cui questo generatore esegue l'impostazione predefinita delle nuove animazioni both. Comprendere la modalità di riempimento è la differenza tra un ingresso che atterra e uno che si annulla, ed è molto più facile da comprendere attivandolo in un'anteprima e guardando il finale cambiare che leggendo a freddo le specifiche.

Quando dovrebbe un ciclo di animazione, e come faccio a controllarlo?

Il conteggio delle iterazioni decide quante volte viene eseguita l'animazione Impostala su un numero intero positivo e l'animazione lo ripete molte volte e poi si ferma; impostala su infinite e gira in loop per sempre Le animazioni in loop sono la scelta giusta per il movimento ambientale, continuo, uno spinner che mostra che sta accadendo il lavoro, un impulso che mantiene vivo un invito all'azione, un sottile galleggiante che dà un po 'di vita a un'immagine di un one-shot animazioni, eseguite una volta, sono per ingressi e uscite, dove il movimento ha un chiaro inizio e fine e ripeterlo sarebbe fonte di distrazione.

La direzione si accoppia con il conteggio delle iterazioni per modellare il modo in cui viene eseguito ogni passaggio. L'impostazione predefinita normal riproduce ogni iterazione dal primo fotogramma chiave all'ultimo. reverse riproduce ciascuno al contrario. alternate esegue il primo passaggio in avanti e il successivo all'indietro, ping-ponging tra gli endpoint, che è il modo in cui si costruisce un impulso regolare avanti e indietro senza definire un viaggio di ritorno nei fotogrammi chiave. alternate-reverse inizia all'indietro e si alterna da lì Il generatore espone tutti e quattro in modo da poter sentire la differenza: un impulso con alternate respira dentro e fuori naturalmente, mentre gli stessi fotogrammi chiave con normal e un numero pari di passaggi deve codificare il ritorno da soli Per il movimento in loop, alternate quasi sempre produce il risultato più organico con meno lavoro sui fotogrammi chiave.

Quali proprietà devo animare per ottenere prestazioni fluide?

Le proprietà che animate decidono se il movimento si svolge a sessanta fotogrammi lisci al secondo o balbetta, e la scelta è la stessa delle transizioni Preferisci transform e opacity. Entrambi possono essere consegnati al compositore e animati senza che il browser ricalcoli il layout della pagina, in modo che rimangano lisci anche su hardware modesto e sotto carico Questo è il motivo per cui una scheda che scivola verso l'alto con transform: translateY sembra senza sforzo mentre la stessa carta animata con top oppure margin-top sembra ruvido Ogni ingresso preimpostato in questo generatore è costruito su transform e opacity proprio per questo motivo.

Le proprietà per evitare di animare in una sequenza di fotogrammi chiave sono quelle che attivano il layout: width, height, top, left, margin e padding. Cambiare una di queste forze il browser per ricalcolare la geometria dell'elemento e tutto ciò che lo circonda su ogni fotogramma, che è costoso ed è la causa più comune di animazione stravagante, peggiorato quando l'animazione loop e paga che costano continuamente Se si desidera un elemento a crescere, un transform: scale è quasi sempre più economico che animare width e height, e sembra quasi identico L'argomento più ampio per assemblare una serie di strumenti che ti guidano verso il percorso economico è nel Toolkit per sviluppatori web pezzo, e le abitudini del flusso di lavoro che rendono il movimento una decisione rapida piuttosto che lenta sono nel Strumenti di produttività per sviluppatori guida.

Come fa il generatore a mantenere onesta l'anteprima?

Ogni costruttore visivo rischia che l'anteprima e il codice esportato si allontanino finché lo strumento non ti insegna un valore che non si riprodurrà Questo generatore inietta l'esatto @keyframes regola che emette nella pagina e applica l'esatto animation stenografia ti mostra l'elemento di anteprima, quindi il movimento che guardi è il movimento che produrrà il tuo CSS copiato Non esiste un percorso di animazione separato che potrebbe non essere d'accordo e il nome del fotogramma chiave nell'anteprima è il nome nell'output.

Poiché un'animazione viene eseguita su mount e quindi terminata, l'anteprima ha bisogno di un modo per riprodurla, che lo strumento gestisce rimontando l'elemento di anteprima quando si preme replay. Ciò rispecchia il comportamento di un'animazione one-shot in produzione, dove viene riprodotta quando appare l'elemento e quindi mantiene il suo stato finale in base alla modalità di riempimento. Anche l'output rimane minimo, eliminando il ritardo zero e qualsiasi valore predefinito in modo da copiare solo dichiarazioni significative, la stessa disciplina di emettere nulla di ridondante che attraversa il file Generatore di filtri CSS e gli altri costruttori visivi Quando si associa un'animazione keyframe a un layout che posiziona l'elemento, il generatore flexbox è un compagno naturale per la costruzione della struttura circostante.

Quali browser supportano le animazioni CSS?

Le animazioni CSS sono supportate in ogni browser attuale e lo sono da ben oltre un decennio Il @keyframes regola, il animation shorthand e tutti i suoi longhand sono universali e non prefissati, quindi l'output di questo generatore funziona in Chrome, Firefox, Safari e Edge senza prefissi o fallback del fornitore Il riferimento definitivo è la specifica CSS Animations Level 1 del W3C, che è la fonte primaria per come si comporta ogni parte della stenografia, e vale la pena leggerlo una volta che il generatore ti ha dato una sensazione fisica per ciò che fanno i pezzi Per l'accessibilità, ricorda che alcuni utenti impostano un prefers-reduced-motion preferenza, ed è buona norma avvolgere l'animazione in loop non essenziale in una query multimediale che la rispetti, in modo che il movimento ambientale possa essere disattivato per le persone che lo trovano scomodo.

Se stai assemblando un set più ampio di strumenti CSS visivi, il generatore di transizione e il Generatore di trasformate CSS siediti naturalmente accanto a questo, poiché le trasformazioni sono la materia prima, la maggior parte di queste animazioni si sposta e le transizioni gestiscono le modifiche di stato, le animazioni no. Tutto qui funziona lato client e il CSS che copi è tuo da utilizzare senza runtime, senza fase di compilazione e senza dipendenza.

Domande frequenti

Che cosa è un generatore di animazione CSS?

Un generatore di animazioni CSS è uno strumento visivo che crea un'animazione di fotogrammi chiave dalle impostazioni scelte Si sceglie un preset, si imposta la durata, l'allentamento, il ritardo, il conteggio e la direzione dell'iterazione e si emette il @keyframes regola e il animation stenografia insieme ad un'anteprima live puoi riprodurre.

Qual è la differenza tra un'animazione CSS e una transizione CSS?

Una transizione anima un singolo cambiamento tra due stati e necessita di un trigger come il passaggio del mouse per l'esecuzione Un'animazione segue un @keyframes sequenza con un numero qualsiasi di passaggi, può eseguire il loop e inizia da sola non appena viene applicata, senza attendere un cambiamento di stato.

Che ordine usa la stenografia dell'animazione?

Questo strumento scrive prima il nome del fotogramma chiave, poi durata, funzione di temporizzazione, ritardo, conteggio di iterazione, direzione e modalità di riempimento, ad esempio animazione: fadeIn 0.6s ease 1 entrambi Il primo valore temporale è sempre la durata e il secondo è il ritardo, quindi un singolo valore temporale viene letto come durata.

Come faccio a fare un ciclo di animazione CSS per sempre?

Imposta il conteggio delle iterazioni all'infinito Nella scorciatoia che è la parola infinito, come nell'animazione: spin 1s infinito lineare Qualsiasi numero intero positivo ripete invece l'animazione che molte volte e poi si ferma secondo la modalità di riempimento e la direzione.

Perché la mia animazione CSS non viene riprodotta?

La causa più comune è una mancata corrispondenza tra il nome dell'animazione e il nome @keyframes, incluso un errore di battitura o una differenza di caso, che lascia il browser senza regole a cui associarsi Controlla anche che la durata sia superiore a zero e che l'elemento sia renderizzato, poiché un'animazione su un display: nessun elemento non viene eseguito.

Cosa fa la proprietà animation-fill-mode?

La modalità Riempimento decide quali stili mostra l'elemento prima dell'inizio e dopo la fine dell'animazione Il default none riporta l'elemento ai suoi stili normali al termine dell'animazione L'impostazione in avanti mantiene il fotogramma chiave finale, applica all'indietro il primo fotogramma chiave durante un ritardo ed entrambi fanno entrambe le cose.

Quali proprietà devo animare per ottenere prestazioni fluide?

Preferisci la trasformazione e l'opacità Il browser può animarli sul compositor senza ricalcolare il layout, in modo che rimangano lisci a 60 fps. Animare larghezza, altezza, cima, sinistra o margine forza un ricalcolo del layout su ogni fotogramma, che è il solito motivo per cui un'animazione balbetta.

L'animazione generata CSS è gratuita e sicura da usare?

Sì. Lo strumento è completamente gratuito senza limiti di iscrizione o di utilizzo ed emette CSS standard e non prefissati supportati in ogni browser moderno. Tutta l'elaborazione avviene nel tuo browser, quindi non viene caricato nulla e lo strumento funziona offline una volta caricato.