⭐ 0
🔍
Testo Immagine PDF e Documenti Audio Musica Elettronica Tempo Utilità Validatori Esoterismo Giochi

Generatore di animazioni con fotogrammi chiave CSS

Costruisci animazioni @keyframe reali su una timeline multitraccia (trasformazione, opacità e interruzioni del colore di sfondo per traccia) con una testina di riproduzione trascinabile che mostra l'esatto stato interpolato a metà animazione.

Fare clic in un punto qualsiasi della corsia per aggiungere una fermata in quel punto. Trascina una fermata per spostarla o modifica i campi % e valore sotto la corsia. Fare doppio clic su una fermata per rimuoverla (minimo 2 per traccia).

Elaborazione... 0%

Risultato

Una regola CSS @keyframes è in realtà una piccola sequenza temporale: una serie di punti di controllo percentuali, ognuno dei quali dichiara come dovrebbe apparire una proprietà in quel preciso momento, con il browser che interpola tutto il resto. Costruirne uno a mano significa tenere a mente molti di questi checkpoint percentuali contemporaneamente su diverse proprietà: questo generatore trasforma quella sequenza temporale in qualcosa che puoi effettivamente vedere e trascinare: una corsia orizzontale per proprietà, con un indicatore di stop su ogni checkpoint.

Il fulcro è la testina di riproduzione scrub. Trascinalo in qualsiasi punto compreso tra 0% e 100% e la casella di anteprima salterà allo stato combinato esatto in quell'istante: non il fotogramma chiave più vicino, ma un valore reale interpolato linearmente calcolato tra i due stop che circondano la testina di riproduzione su ogni traccia attiva. Le proprietà numeriche come posizione, rotazione e scala vengono interpolate come numeri semplici; background-color interpola ciascun canale rosso, verde e blu in modo indipendente, il che è ciò che fa sì che una traccia di colore svanisca dolcemente attraverso tonalità intermedie invece di saltare tra i colori effettivamente impostati.

Tracce multiple si combinano automaticamente in un'unica animazione coerente: ogni proprietà basata sulla trasformazione (spostamento, rotazione, scala) si fonde in un'unica dichiarazione di trasformazione ad ogni percentuale di fotogramma chiave, mentre l'opacità e il colore di sfondo rimangono sulle proprie linee, esattamente come apparirebbero i veri CSS scritti a mano. Le percentuali in cui una determinata traccia non ha fermate esplicite vengono semplicemente tralasciate di proposito dalle dichiarazioni di quella proprietà: l'interpolazione dei fotogrammi chiave del browser riempie il divario tra qualunque fermata esista, allo stesso modo in cui lo farebbe per qualsiasi regola @keyframes digitata a mano.

Cinque preimpostazioni - Bounce, Shake, Pulse, Fade e Slide-in - caricano una timeline completa e pronta per essere modificata (inclusa una durata ragionevole, una funzione di temporizzazione e un conteggio delle ripetizioni) in un clic. Premi Riproduci in qualsiasi momento per vedere la vera animazione CSS eseguita sull'elemento di anteprima, generata al volo attraverso un foglio di stile inserito dinamicamente, quindi copia l'intero blocco @keyframes più la scorciatoia .animated-element { animazione: ... } direttamente nel tuo progetto. Come ogni strumento su questo sito, tutto viene eseguito localmente nel browser senza mai caricare nulla.

🛡️
Eseguito nel browser

I tuoi file e input non lasciano mai questo dispositivo. L'elaborazione viene eseguita completamente offline. Sicuro al 100%.

Formati e regole accettati

  • Timeline multitraccia per trasformazione (translateX, TranslateY, rotazione, scala), opacità e colore di sfondo, ciascuno con le proprie fermate trascinabili.
  • L'interpolazione lineare reale (proprietà numeriche e RGB per canale per i colori) guida l'anteprima di scorrimento tra due fermate qualsiasi su una traccia.
  • Un pulsante Riproduci applica il CSS @keyframes effettivamente generato all'anteprima tramite un foglio di stile inserito dinamicamente, oltre a un output stenografico completo copiabile @keyframes + animazione.

Vantaggi principali

✓ La testina di riproduzione trascinabile mostra il reale stato interpolato a metà animazione, non un salto tra le interruzioni dei fotogrammi chiave, esattamente come il browser lo renderà effettivamente.
✓ Ogni proprietà vive su una propria traccia con le proprie fermate, quindi un rimbalzo, un cambiamento di colore e una dissolvenza possono scorrere sullo stesso elemento contemporaneamente senza entrare in conflitto tra loro.
✓ Cinque preimpostazioni già pronte (bounce, shake,pulse, fade, slide-in) forniscono un punto di partenza funzionante con un clic, quindi ogni fermata rimane completamente modificabile da lì.

Casi d'uso

  • • Trascina la testina di scorrimento in qualsiasi punto dell'animazione a rimbalzo o a impulso per vedere l'esatto stato reale interpolato a metà animazione prima di inviare il CSS.
  • • Metti insieme una traccia TranslateX e una traccia di opacità per creare una vera animazione di ingresso slide-in-and-fade, quindi copia l'intera abbreviazione @keyframes + animazione.
  • • Aggiungi una traccia del colore di sfondo insieme a una traccia di scala per animare insieme il colore e le dimensioni di un pulsante, osservando i canali RGB fondersi dal vivo mentre strofini.