Hűvös CSS animációk készítése az Animista segítségével

Vannak tonna CSS animációs webes alkalmazások online. De nagyon kevesen hasonlítanak össze a részletességgel és a könnyű használatsal Animista.

Ez az ingyenes webes alkalmazás lehetővé teszi Egyéni CSS animációk létrehozása egy gombnyomással. Az előre megtervezett mozgások, például dia, transzformáció, hinták és még árnyékcsökkentő animációk közül választhat.

Miután létrehozta az animációt, megteheti exportálja a kódot éppúgy, mint más CSS generátorokkal. Kivéve, ez a kód sokkal könnyebb dolgozni és egyenletes beépített minifejező eszközzel.

Az interfész először zavarónak érzi magát, de ez csak azért van, mert sok lehetőség van!

Egyéni animációkat készít három fő lépést követ és az interfész használata fentről lefelé:

1. Válasszon egy mozgásstílust (csúszás, dia, flip-skála) a felső körökből
2. Testreszabása különböző mozgási típusokkal alul
3. Módosítsa az animációs beállításokat az úszó bal oldali opciósávban

Ezzel az eljárással megváltoztathatja az animáció teljes időtartamát, a könnyítő stílust, a késedelmet, mindent. És minden tiszta CSS3-on keresztül működik, ami még lenyűgözőbbé teszi.

Megjegyezzük, hogy a legmagasabb navigációs sávban is választhat különböző animációs célstílusok.

A az alapértelmezett érték “alapvető” ami elég sok mindent tud működni (lebeg, kattintás, vagy azonnali animáció). Egyéb célok közé tartozik oldalszöveg, háttér animációk, sőt egyéni bejárati animációk egy rejtett oldalelem megjelenítéséhez.

Különösen tetszik a “Figyelem” hivatkozás a tetején, melynek néhány hűvös rázkódás és jitter hatása van a gomb stílusaira. Ezek nagyszerűen működnek a CTA gombokon, hogy megragadják a figyelmet és ösztönözzék a felhasználók interakcióit.

Miután elvégezte a beállításokat, csak kattintson a kis konzol ikonra az előnézeti panel jobb felső sarkában.

Ez egy új oldalt jelenít meg a teljes CSS animációs osztálya a kulcskeretekkel együtt. Az opcionális funkciók lehetővé teszik a kódot és tartalmazza az automatikus előtagot amely támogatja a régebbi webböngészőket.

Tonnanyi egyedi CSS animációs eszközt használtam, és az Animista kétségtelenül a leginkább gazdag eszköz. Ez teljesen ingyenes és egy kicsit bonyolult az első, de miután megértette a felületet, ez messze a legjobb generátor, amit használhat.

Próbáld ki, csak látogass el a honlapra, és kattints a gombra “Próbálj ki”. A webes alkalmazás @ ana108 alkotójával is megoszthatja gondolatait és dicséreteit.