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

Generator CSS animacije ključnih kadrova

Izgradite stvarne @keyframes animacije na vremenskoj traci s više traka — transformacija, neprozirnost i zaustavljanje boje pozadine po stazi — s glavom za reprodukciju koja se može povlačiti i koja prikazuje točno interpolirano stanje srednje animacije.

Kliknite bilo gdje na traci da biste tamo dodali stanicu. Povucite stanicu kako biste je pomaknuli ili uredite njezina polja % i vrijednosti ispod trake. Dvaput kliknite zaustavljanje da biste ga uklonili (najmanje 2 po zapisu).

Obrada... 0%

Rezultat

CSS pravilo @keyframes zapravo je mala vremenska linija: skup postotnih kontrolnih točaka, od kojih svaka određuje kako bi svojstvo trebalo izgledati u tom točnom trenutku, a preglednik interpolira sve između. Izgradnja jednog ručno znači držanje nekoliko od ovih postotnih kontrolnih točaka u vašoj glavi odjednom na nekoliko svojstava — ovaj generator pretvara tu vremensku crtu u nešto što zapravo možete vidjeti i povlačiti: jednu vodoravnu traku po posjedu, s oznakom zaustavljanja na svakoj kontrolnoj točki.

Središnji dio je igraća glava za piling. Povucite ga do bilo koje točke između 0% i 100% i okvir za pregled skoči u točno kombinirano stanje u tom trenutku — ne najbliži ključni kadar, već stvarna linearno interpolirana vrijednost izračunata između koja god dva zaustavljanja okružuju glavu za reprodukciju na svakoj aktivnoj stazi. Numerička svojstva poput položaja, rotacije i mjerila interpoliraju se kao obični brojevi; background-color neovisno interpolira svaki crveni, zeleni i plavi kanal, što čini da trag boja glatko blijedi kroz srednje nijanse umjesto da skače između boja koje ste stvarno postavili.

Višestruki zapisi automatski se kombiniraju u jednu koherentnu animaciju: svako svojstvo temeljeno na transformaciji (pomicanje, rotacija, skaliranje) stapa se u jednu deklaraciju transformacije na svakom postotku ključnog kadra, dok neprozirnost i boja pozadine ostaju u vlastitim crtama, točno onako kako bi izgledao pravi rukom pisani CSS. Postoci u kojima određena staza nema eksplicitno zaustavljanje jednostavno su namjerno izostavljeni iz deklaracija tog svojstva — vlastita interpolacija ključnih sličica preglednika popunjava prazninu između zaustavljanja koja god postoje, na isti način kao što bi to bilo za bilo koje pravilo @keyframes koje ste ručno upisali.

Pet unaprijed postavljenih postavki — odskakanje, podrhtavanje, pulsiranje, nestajanje i klizanje — učitava potpunu vremensku crtu spremnu za podešavanje (uključujući razumno trajanje, funkciju mjerenja vremena i brojanje ponavljanja) jednim klikom. Pritisnite Reproduciraj u bilo kojem trenutku da vidite pravu CSS animaciju koja se izvodi na elementu pregleda, generiranu u hodu kroz dinamički umetnutu tablicu stilova, a zatim kopirajte cijeli blok @keyframes plus skraćenicu .animated-element { animation: ... } ravno u svoj projekt. Kao i svaki alat na ovoj stranici, radi lokalno u pregledniku i ništa se ne učitava.

🛡️
Izvršeno u pregledniku

Vaše datoteke i unosi nikada ne napuštaju ovaj uređaj. Obrada se odvija potpuno offline. 100% siguran.

Prihvaćeni formati i pravila

  • Višestruka vremenska traka za transformaciju (translateX, translateY, rotiranje, skaliranje), neprozirnost i boju pozadine, svaka sa svojim vlastitim zaustavljanjima koja se mogu povlačiti.
  • Prava linearna interpolacija — numerička svojstva i RGB po kanalu za boje — pokreće pretpregled između bilo koja dva zaustavljanja na stazi.
  • Gumb za reprodukciju primjenjuje stvarno generirani @keyframes CSS na pregled putem dinamički umetnute tablice stilova, plus potpuni @keyframes + skraćeni izlaz animacije koji se može kopirati.

Ključne prednosti

✓ Glava reprodukcije koja se može povlačiti prikazuje stvarno interpolirano stanje srednje animacije — ne skok između zaustavljanja ključnih kadrova — točno onako kako će to preglednik zapravo prikazati.
✓ Svako svojstvo živi na vlastitoj stazi sa svojim zaustavljanjima, tako da se odskakanje, promjena boje i blijeđenje mogu odvijati na istom elementu odjednom bez međusobne borbe.
✓ Pet gotovih unaprijed postavljenih postavki (odskakanje, trešenje, pulsiranje, nestajanje, klizanje) daju radnu početnu točku jednim klikom, a zatim svako zaustavljanje ostaje u potpunosti moguće uređivati od tamo.

Slučajevi upotrebe

  • • Povucite glavu reprodukcije do bilo koje točke u animaciji odbijanja ili pulsiranja kako biste vidjeli točno stvarno interpolirano stanje srednje animacije prije slanja CSS-a.
  • • Postavite traku translateX i stazu neprozirnosti zajedno kako biste izradili pravu ulaznu animaciju s klizanjem i blijeđenjem, a zatim kopirajte cijeli @keyframes + kratak prikaz animacije.
  • • Dodajte trag pozadinske boje uz trag skale kako biste zajedno animirali boju i veličinu gumba, gledajući kako se RGB kanali stapaju uživo dok trljate.