CSS animáció generátor
Állítsd be a mozgási előbeállításokat vagy a kulcsképeket, és játszd le az animációt az ellenőrzéshez. Szerezz CSS-t egy weboldalhoz és HTML-használati példát.
Amit megtehet
Mozgás hangolása előbeállításból
Válasszon 12 típus közül, beleértve a belépéseket, kilépéseket és a forgatást. A felhasználáshoz igazítsa az időtartamot és az ismétlődést.
A köztes állapotok is szerkeszthetők
Adjon meg mozgást, forgatást, skálázást és átlátszatlanságot minden kulcskockához, és ellenőrizze a generált mozgást.
CSS és HTML beszerzése
Másolja vagy mentse az animációs CSS-t és az azonos osztályt használó HTML-használati példát.
Használat
Válasszon előbeállítást
Válassza ki a kívánt mozgást, és állítsa 1 lejátszásra az időtartamot. Másik előbeállítás választásakor a módosított beállítások is lecserélődnek.
Csak a szükséges részeket hangolja
Nyissa meg a lejátszási részleteket vagy a kulcskockákat a köztes mozgás, az irány, az ismétlődés és más beállítások módosításához.
Generálás és lejátszás
Ellenőrizze a „CSS generálása és előnézet” funkcióval. Ha bármit módosít, generálja újra.
CSS és HTML beszerzése
Alkalmazza a CSS-t, és adja hozzá a toollet-motion osztályt egy HTML-elemhez. A HTML-használati példát a CSS-sel együtt használja.
Mikor hasznos
Belépő animáció létrehozása
Használjon beúszó vagy alulról érkező belépési előbeállítást a belépő mozgás és a sebesség beállításához.
Mozgás gombbal való interakciókor
Állítsa a kezdési feltételt hoverre vagy billentyűzetfókuszra, hogy a mozgás reagáljon az interakcióra.
A kulcskockák és a lejátszási feltételek megértése
Köztes állapotok és időtartam
A kulcskocka %-os értéke a helyét jelöli az 1 lejátszáson belül. Egy 1 másodperces animációnál az 50% 0,5 másodpercnél van. A görbület határozza meg, hogyan változnak az értékek a kulcskockák között.
Mozgás, forgatás és megjelenés
A vízszintes/függőleges pozíció az eredeti helyzettől mért elmozdulás mértéke. Az 1 méretarány az eredeti méret; a 0 átlátszatlanság átlátszó, az 1 teljesen átlátszatlan.
Késleltetés, ismétlődés és irány
A késleltetés csak egyszer, a lejátszás megkezdése előtt hozzáadódik. véges lejátszásnál az összes idő a késleltetés + az 1 lejátszás időtartama × az ismétlődések száma. A váltakozó irány oda-vissza vált az előre és hátra irány között.
A lejátszás előtti és utáni állapotok
Válassza ki, mely állapot jelenik meg a késleltetés alatt és a lejátszás vége után. A fordított és a váltakozó beállítás megváltoztatja, hogy a lejátszás elején és végén mely kulcskockahelyek használódnak.
Csökkentett mozgás beállításai
A generált CSS támogatja az eszköz csökkentett mozgásra vonatkozó beállítását. Leállítja az animációt, és a beállított irány és ismétlődésszám által meghatározott végállapotot használja. Végtelen lejátszásnál az első lejátszás végpontját használja.
Gyakran ismétlődő kérdések
Lejátszhatom csak egyszer?
Kapcsolja ki a „Végtelen ismétlés” beállítást, és állítsa az ismétlések számát 1-re. A szokásos előbeállítások 1 lejátszással indulnak, míg a forgatás és a lebegés esetén a folyamatos ismétlés már be van kapcsolva.
Melyik elemre alkalmazzam a CSS-t?
Adja hozzá a toollet-motion osztályt egy HTML-elemhez, és használja együtt a generált CSS-sel. A HTML-használati példa egy gombelem-töredék, nem teljes, önálló weboldal.
Hány kulcskockát hozhatok létre?
2–8 kulcskockát használhat, beleértve a 0%-os kezdetet és a 100%-os véget. Új kulcskocka hozzáadásakor az a legszélesebb intervallum felezőpontjára kerül. A kezdet és a vége nem törölhető, és csak a %-os helyük rögzített.
A beállítás módosítása után eltűnt az előnézet.
A beállítások módosításakor az eredmények törlődnek, hogy ne használhassa véletlenül az előző beállítások mozgását vagy kódját. Ellenőrzéshez generálja újra.
Miért nem mozog az előnézet?
A mozgás leáll, ha az eszközön be van kapcsolva a csökkentett mozgás. A hover és a fókusz beállításainál ellenőrizze a kezdési feltételeket is. Az előnézet szünetel, amikor másik lapra vált.
Használhatok több animációt ugyanazon az oldalon?
A generált osztály- és kulcskockanevek közösek. Ha külön animációkat szeretne használni, minden animációnál mindkét nevet módosítsa, és a változtatásokat tükrözze a megfelelő HTML-ben.
Bemenet és eredmény
- Beállítások
- 12 előbeállítás, 2–8 kulcskocka és 0,2–60 másodperces időtartam.
- Lejátszás
- 0–60 másodperces késleltetés, 1–100 ismétlődés vagy végtelen ismétlődés, görbület, irány, a lejátszás előtti és utáni állapotok, valamint kezdési feltételek.
- Eredmény
- CSS és HTML-használati példa. Csak a mozgás van definiálva; teljes weboldal vagy videófájl nem jön létre.