Generátor animací CSS
Upravte předvolby pohybu nebo klíčové snímky a přehrajte animaci pro kontrolu. Získejte CSS pro použití na webové stránce a příklad použití v HTML.
Co můžete dělat
Upravit pohyb z předvolby
Vyberte z 12 typů včetně vstupů, výstupů a otáčení. Podle potřeby upravte dobu trvání a opakování.
Upravit i mezilehlé stavy
Pro každý klíčový snímek zadejte pohyb, otáčení, měřítko a krytí a zkontrolujte vygenerovaný pohyb.
Získat CSS a HTML
Zkopírujte nebo uložte animované CSS a ukázku použití v HTML se stejnou třídou.
Jak na to
Vyberte předvolbu
Vyberte požadovaný pohyb a nastavte dobu trvání jednoho přehrání. Volba jiné předvolby nahradí také nastavení, která jste upravili.
Upravte pouze to, co potřebujete
Otevřete podrobnosti přehrávání nebo klíčové snímky a změňte mezilehlý pohyb, směr, opakování a další nastavení.
Vygenerovat a přehrát
Zkontrolujte jej pomocí „Vygenerovat CSS a náhled“. Pokud cokoli změníte, vygenerujte jej znovu.
Získat CSS a HTML
Použijte CSS a přidejte třídu toollet-motion k prvku HTML. Ukázku použití v HTML použijte společně s CSS.
Kdy je to užitečné
Vytvořit vstupní animaci
Použijte předvolbu fade-in nebo vstup zespodu a upravte pohyb a rychlost vstupu.
Pohyb při interakci s tlačítkem
Změňte podmínku spuštění na hover nebo focus klávesnice a vytvořte pohyb reagující na interakci.
Pochopení klíčových snímků a podmínek přehrávání
Mezilehlé stavy a doba trvání
Procento klíčového snímku je jeho poloha v rámci jednoho přehrání. U animace dlouhé 1 sekundu je 50 % na 0,5 sekundy. Easing určuje, jak se hodnoty mezi klíčovými snímky mění.
Pohyb, otáčení a vzhled
Vodorovná a svislá poloha znamenají velikost posunutí od původní polohy. Měřítko 1 je původní velikost; krytí 0 je průhledné a 1 je neprůhledné.
Zpoždění, opakování a směr
Zpoždění se přičítá pouze jednou před začátkem přehrávání. U konečného přehrávání je celkový čas zpoždění + doba trvání jednoho přehrání × počet opakování. Střídavý režim přepíná mezi vpřed a vzad.
Stavy před přehráním a po něm
Vyberte, který stav se zobrazí během zpoždění a po skončení přehrávání. Nastavení obrácení a střídání mění to, které pozice klíčových snímků se použijí na začátku a na konci přehrávání.
Nastavení omezeného pohybu
Vygenerované CSS respektuje nastavení omezeného pohybu vašeho zařízení. Zastaví animaci a použije koncový stav určený nastaveným směrem a počtem opakování. U nekonečného přehrávání použije konec prvního přehrání.
Často kladené otázky
Mohu to přehrát jen jednou?
Vypněte „Udržovat opakování“ a nastavte počet opakování na 1. Standardní předvolby začínají jedním přehráním, zatímco otáčení a plování začínají s povoleným průběžným opakováním.
Na který prvek mám CSS použít?
Přidejte třídu toollet-motion k prvku HTML a použijte ji s vygenerovaným CSS. Ukázka použití v HTML je fragment prvku button, nikoli kompletní samostatná webová stránka.
Kolik klíčových snímků mohu vytvořit?
Můžete mít 2–8 klíčových snímků včetně začátku na 0 % a konce na 100 %. Přidáním klíčového snímku jej umístíte do středu nejširšího intervalu. Začátek a konec nelze smazat a pevně dané jsou pouze jejich pozice v procentech.
Po změně nastavení zmizel náhled.
Při změně nastavení se výsledky vymažou, abyste omylem nepoužili pohyb nebo kód z předchozího nastavení. Znovu jej vygenerujte a zkontrolujte aktuální nastavení.
Proč se náhled nepohybuje?
Pohyb se zastaví, když je na zařízení zapnuté nastavení omezeného pohybu. U nastavení pro hover a focus zkontrolujte také podmínky spuštění. Náhled se pozastaví, když přepnete na jinou kartu.
Mohu na stejné stránce použít více animací?
Vygenerovaný název třídy a klíčových snímků jsou sdílené. Chcete-li použít samostatné animace, změňte u každé animace oba názvy a promítněte tyto změny do odpovídajícího HTML.
Vstup a výsledky
- Nastavení
- 12 předvoleb, 2–8 klíčových snímků a doba trvání 0,2–60 sekund.
- Přehrávání
- Zpoždění 0–60 sekund, 1–100 opakování nebo nekonečné opakování, easing, směr, stavy před přehráním a po něm a podmínky spuštění.
- Výstup
- CSS a ukázka použití v HTML. Definuje se pouze pohyb; kompletní webová stránka ani video soubor se nevytvářejí.