CSS Keyframe Animation Generator

Pravidlo CSS @keyframes je ve skutečnosti malá časová osa: sada procentuálních kontrolních bodů, z nichž každý deklaruje, jak by měla vlastnost přesně v tu chvíli vypadat, přičemž prohlížeč interpoluje vše mezi tím. Vybudovat jeden ručně znamená mít v hlavě několik těchto procentuálních kontrolních bodů najednou napříč několika nemovitostmi – tento generátor změní časovou osu na něco, co můžete skutečně vidět a přetáhnout: jeden vodorovný pruh na nemovitost se značkou zastávky na každém kontrolním bodu.

Středobodem je čistící hrací hlava. Přetáhněte jej do libovolného bodu mezi 0 % a 100 % a okno náhledu v tom okamžiku přeskočí do přesně kombinovaného stavu – nikoli na nejbližší klíčový snímek, ale na skutečnou lineárně interpolovanou hodnotu vypočítanou mezi dvěma zastávkami, které obklopují přehrávací hlavu na každé aktivní stopě. Číselné vlastnosti jako poloha, rotace a měřítko se interpolují jako obyčejná čísla; background-color interpoluje každý červený, zelený a modrý kanál nezávisle, což způsobuje, že barevná stopa hladce vybledne přes mezilehlé odstíny namísto přeskakování mezi barvami, které jste skutečně nastavili.

Více stop se automaticky spojí do jedné koherentní animace: každá vlastnost založená na transformaci (pohyb, otočení, měřítko) se spojí do jediné deklarace transformace v každém procentu klíčového snímku, zatímco neprůhlednost a barva pozadí zůstanou na svých vlastních řádcích, přesně tak, jak by vypadaly skutečné ručně psané CSS. Procenta, kdy daná stopa nemá explicitní zastávku, jsou jednoduše záměrně vynechána z deklarací této vlastnosti – vlastní interpolace klíčových snímků prohlížeče vyplní mezeru mezi všemi zastávkami, které existují, stejným způsobem, jakým by to bylo u jakéhokoli pravidla @keyframes, které jste zadali ručně.

Pět předvoleb – odraz, chvění, pulz, slábnutí a zasunutí – načte kompletní časovou osu připravenou k úpravě (včetně rozumné doby trvání, funkce časování a počtu opakování) jediným kliknutím. Klepnutím na Přehrát v libovolném bodě uvidíte skutečnou animaci CSS spuštěnou na prvku náhledu, generovanou za běhu dynamicky vloženou šablonou stylů, a poté zkopírujte celý blok @keyframes plus zkrácený text .animated-element {animace: ... } přímo do svého vlastního projektu. Jako každý nástroj na tomto webu běží vše lokálně v prohlížeči a nikdy se nic nenahraje.