Generátor animácií kľúčových snímok CSS

Pravidlo CSS @keyframes je skutočne malá časová os: súbor percentuálnych kontrolných bodov, z ktorých každý deklaruje, ako by mala vlastnosť vyzerať presne v tom momente, pričom prehliadač interpoluje všetko medzi tým. Budovanie jedného ručne znamená mať v hlave niekoľko týchto percentuálnych kontrolných bodov naraz v niekoľkých nehnuteľnostiach – tento generátor premení túto časovú os na niečo, čo môžete skutočne vidieť a ťahať: jeden vodorovný pruh na nehnuteľnosť so značkou zastávky na každom kontrolnom bode.

Stredobodom je čistiaca hracia hlava. Potiahnite ho do ľubovoľného bodu medzi 0 % a 100 % a okno náhľadu v tom okamihu preskočí do presného kombinovaného stavu – nie na najbližšiu kľúčovú snímku, ale na skutočnú lineárne interpolovanú hodnotu vypočítanú medzi dvoma zarážkami, ktoré obklopujú prehrávaciu hlavu na každej aktívnej stope. Číselné vlastnosti ako poloha, rotácia a mierka sa interpolujú ako obyčajné čísla; Farba pozadia interpoluje každý červený, zelený a modrý kanál nezávisle, čo spôsobuje, že farebná stopa hladko vybledne cez stredné odtiene namiesto preskakovania medzi farbami, ktoré ste skutočne nastavili.

Viaceré stopy sa automaticky skombinujú do jednej koherentnej animácie: každá vlastnosť založená na transformácii (presun, rotácia, mierka) sa zlúči do jednej deklarácie transformácie pri každom percente kľúčovej snímky, pričom nepriehľadnosť a farba pozadia zostanú na vlastných riadkoch, presne tak, ako by vyzeral skutočný ručne písaný CSS. Percentá, kedy daná stopa nemá žiadne explicitné zastavenie, sú jednoducho zámerne vynechané z deklarácií tejto vlastnosti – interpolácia kľúčových snímok prehliadača vyplní medzeru medzi tými, ktoré zastávky existujú, rovnako ako v prípade akéhokoľvek pravidla @keyframes, ktoré ste zadali ručne.

Päť predvolieb – odraz, chvenie, pulz, zoslabenie a zasunutie – načíta kompletnú časovú os pripravenú na vyladenie (vrátane rozumného trvania, funkcie načasovania a počtu opakovaní) jediným kliknutím. Kliknutím na tlačidlo Prehrať kedykoľvek zobrazíte skutočnú animáciu CSS spustenú na prvku ukážky, vygenerovanú za behu prostredníctvom dynamicky vloženej šablóny so štýlmi, a potom skopírujte celý blok @keyframes plus skratku .animated-element { animation: ... } priamo do svojho vlastného projektu. Ako každý nástroj na tejto stránke, všetko beží lokálne v prehliadači bez toho, aby sa nič odovzdalo.