⭐ 0
🔍
Tekst Slika PDF i dokumenti Audio Glazba Elektronika Vrijeme Komunalije Validatori Ezoterija Igre

CSS generator ključnih animacija

Izradite prave @keyframes animacije na višetračnoj vremenskoj crti — s točkama za transformaciju, prozirnost i boju pozadine po traci — s pomičnim klizačem koji prikazuje točno interpolirano stanje usred animacije.

🔒 U potpunosti se obrađuje u vašem pregledniku — ništa što ovdje unesete nikada se ne učitava.

Kliknite bilo gdje na traku da biste dodali točku. Povucite točku da biste je pomaknuli ili uredite njezine % i polja vrijednosti ispod trake. Dvaput kliknite točku da biste je uklonili (najmanje 2 po traci).

Obrada... 0%

Rezultat

CSS @keyframes pravilo zapravo je mala vremenska crta: skup postotnih kontrolnih točaka, pri čemu svaka izjavljuje kako bi svojstvo trebalo izgledati u tom točnom trenutku, a preglednik interpolira sve između. Ručna izrada znači držati nekoliko tih postotnih kontrolnih točaka istovremeno u glavi za više svojstava — ovaj generator pretvara tu vremensku crtu u nešto što stvarno možete vidjeti i pomicati: jednu vodoravnu traku po svojstvu, s oznakom točke na svakoj kontrolnoj točki.

Središnji dio je klizač za pretragu. Povucite ga na bilo koju točku između 0% i 100% i okvir za pretpregled skače na točno kombinirano stanje u tom trenutku — ne na najbližu ključnu točku, već na stvarnu linearno-interpoliranu vrijednost izračunatu između dviju točaka koje okružuju klizač na svakoj aktivnoj traci. Numerička svojstva poput položaja, rotacije i skaliranja interpoliraju se kao obični brojevi; boja pozadine interpolira svaki crveni, zeleni i plavi kanal neovisno, što čini da traka boje glatko prelazi kroz međunijanse umjesto da skače između boja koje ste stvarno postavili.

Više traka automatski se spaja u jednu koherentnu animaciju: svako svojstvo temeljeno na transformaciji (pomicanje, rotiranje, skaliranje) spaja se u jednu transform deklaraciju na svakom postotku ključne točke, dok prozirnost i boja pozadine ostaju u vlastitim redovima, točno onako kako bi izgledao pravi ručno pisani CSS. Postotci na kojima određena traka nema eksplicitnu točku namjerno su izostavljeni iz deklaracija tog svojstva — interpolacija ključnih točaka samog preglednika popunjava prazninu između točaka koje postoje, na isti način kao i za svako @keyframes pravilo koje ste ručno upisali.

Pet predložaka — odskok, podrhtavanje, pulsiranje, zatamnjenje i klizanje — učitavaju kompletnu, spremnu za prilagodbu vremensku crtu (uključujući razumno trajanje, funkciju vremenskog slijeda i broj ponavljanja) jednim klikom. Pritisnite Pokreni u bilo kojem trenutku da biste vidjeli stvarnu CSS animaciju kako se izvodi na elementu pretpregleda, generiranu u hodu putem dinamički umetnutog stilskog lista, a zatim kopirajte cijeli @keyframes blok plus .animated-element { animation: ... } skraćenicu izravno u vlastiti projekt. Kao i svaki alat na ovoj stranici, sve se izvodi lokalno u pregledniku, bez ikakvog prijenosa podataka.

Uživate u ovom alatu? Mislite da je ovaj proizvod koristan? Vidite potencijal u njemu i želite ga podržati?

🛡️
Izvršava se u pregledniku

Vaše datoteke i unosi nikad ne napuštaju ovaj uređaj. Obrada se odvija potpuno izvan mreže. 100% sigurno.

Prihvaćeni formati i pravila

  • Višetračna vremenska crta za transformaciju (translateX, translateY, rotate, scale), prozirnost i boju pozadine, svaka s vlastitim pomičnim točkama.
  • Stvarna linearna interpolacija — numerička svojstva i po-kanalna RGB za boje — upravlja pretpregledom između bilo koje dvije točke na traci.
  • Tipka Pokreni primjenjuje stvarno generirani @keyframes CSS na pretpregled putem dinamički umetnutog stilskog lista, plus kopirajući potpuni @keyframes + animation skraćeni ispis.

Ključne prednosti

✓ Pomični klizač prikazuje stvarno interpolirano stanje usred animacije — a ne skok između ključnih točaka — točno onako kako će ga preglednik stvarno prikazati.
✓ Svako svojstvo ima svoju vlastitu traku s vlastitim točkama, tako da odskok, promjena boje i zatamnjenje mogu istovremeno djelovati na istom elementu bez međusobnog sukobljavanja.
✓ Pet gotovih predložaka (odskok, podrhtavanje, pulsiranje, zatamnjenje, klizanje) daju radnu početnu točku jednim klikom, a svaka točka nakon toga ostaje potpuno prilagodljiva.

Slučajevi upotrebe

  • • Povucite klizač reprodukcije na bilo koju točku u animaciji odskoka ili pulsiranja kako biste vidjeli točno interpolirano stanje usred animacije prije nego što pošaljete CSS.
  • • Složite translateX zapis i opacity zapis zajedno kako biste izradili stvarnu animaciju ulaska s klizanjem i nestajanjem, a zatim kopirajte cijeli @keyframes + animation skraćeni zapis.
  • • Dodajte background-color zapis pored scale zapisa kako biste zajedno animirali boju i veličinu gumba, promatrajući kako se RGB kanali uživo stapaju dok povlačite klizač.