Generatore di animazioni CSS Keyframe

Una regola CSS @keyframes è in realtà una piccola timeline: un insieme di checkpoint percentuali, ognuno dei quali dichiara come dovrebbe apparire una proprietà in quel preciso istante, mentre il browser interpola tutto ciò che sta in mezzo. Scrivendone una a mano, bisognerebbe tenere a mente diversi di questi checkpoint percentuali per più proprietà contemporaneamente — questo generatore trasforma quella timeline in qualcosa che puoi effettivamente vedere e trascinare: una corsia orizzontale per proprietà, con un marcatore di stop su ogni checkpoint.

Il cuore dello strumento è la testina di scorrimento. Trascinala in qualsiasi punto tra lo 0% e il 100% e il riquadro di anteprima salterà all'esatto stato combinato in quell'istante — non al fotogramma chiave più vicino, ma a un valore reale interpolato linearmente, calcolato tra i due stop che racchiudono la testina su tutte le tracce attive. Le proprietà numeriche come posizione, rotazione e scala vengono interpolate come numeri semplici; il colore di sfondo viene interpolato indipendentemente per ogni canale rosso, verde e blu, ed è questo che permette a una traccia colore di dissolversi dolcemente attraverso tonalità intermedie, anziché saltare tra i colori effettivamente impostati.

Più tracce si combinano automaticamente in un'unica animazione coerente: ogni proprietà basata su transform (spostamento, rotazione, scala) viene fusa in un'unica dichiarazione transform in ogni percentuale di keyframe, mentre opacità e colore di sfondo restano su righe separate, esattamente come apparirebbe il CSS scritto a mano. Le percentuali in cui una determinata traccia non ha uno stop esplicito vengono volutamente omesse dalle dichiarazioni di quella proprietà — l'interpolazione dei fotogrammi chiave del browser colma lo spazio tra gli stop esistenti, nello stesso modo in cui lo farebbe per qualsiasi regola @keyframes scritta manualmente.

Cinque preset — rimbalzo, scuotimento, pulsazione, dissolvenza e scorrimento in entrata — caricano una timeline completa e pronta da modificare (inclusi durata, funzione di temporizzazione e numero di ripetizioni ragionevoli) con un clic. Premi Play in qualsiasi momento per vedere l'animazione CSS reale in esecuzione sull'elemento di anteprima, generata al volo tramite un foglio di stile iniettato dinamicamente, e poi copia l'intero blocco @keyframes più lo shorthand .animated-element { animation: ... } direttamente nel tuo progetto. Come ogni strumento su questo sito, tutto viene eseguito localmente nel browser senza caricare mai nulla da nessuna parte.