10 CSS3 Animációs Eszközök Könyvjelző

Mivel az emberek jobban érzékelik a mozgó dolgokat, az okosan használt animációk növelhetik a webhely felhasználói élményét felhívja a figyelmet a fontos elemekre, amelyeket a felhasználóknak gyorsan fel kell hívniuk.

A CSS3 egy új animációs szintaxist vezetett be, amely segít sok érdekes dolgot elérni a tervekben. A hűvös animációk építése néha bonyolult és időigényes is lehet, amikor az animaiton könyvtárak és generátorok kiválóan használhatók.

Nézze meg a CSS segítségével elérhető animációkat:

38 Inspiráló CSS3 animációs demók
15 CSS-tel létrehozott gyönyörű szöveghatások
30 Cool CSS animáció, amit meg kell nézni
Hogyan lehet létrehozni a Bounce effektust CSS3 animációval

Ebben a hozzászólásban megnézzük a 10 ragyogó eszközt, amely megkönnyítheti és gyorsíthatja saját animációinak létrehozását.

1. CSS3Gen CSS3 animációs generátor

CSS3Gen Egy könnyen használható animációs generátort biztosít, amely lehetővé teszi az alapvető animációk gyors létrehozását. Bár nem készít bonyolult alkotásokat ezzel az eszközzel, ez egy nagyszerű választás, ha szabványos animációt szeretne létrehozni anélkül, hogy túl sok dühös lenne.

Ön nem kell a kezével piszkoskodnia a kóddal, mivel beállíthatja a tulajdonságokat egy űrlapon, megtekintheti az eredményt, majd egyszerűen másolja és illessze be a kódot a saját CSS fájljába.

2. CSS animáció

Ha te bonyolultabb animációkra van szükség, talán megtalálhatod CSS animáció hasznos. Érettebb felhasználói felülettel rendelkezik, kicsit több tulajdonságot állíthat be, és intuitív idővonal segítségével követheti, leállíthatja és újraindíthatja az animációt.

Vannak példa animációk is, mint például “Ugrál”, “Ráz”, és “Hinta”, hogy betölthesse a generátort, és módosítsa a kódot az Ön igényeinek megfelelően.

3. Coveloping CSS animációs generátor

Covelopingaz animációs generátor valószínűleg a legjobb választás ha új a CSS3 animációkkal, és szeretnék gyorsan megérteni, hogyan működnek. Ez az egyszerű, de hatékony eszköz lehetővé teszi, hogy tesztelje a különböző típusú animációkat, amiket a CSS3 kínál, és könnyedén megnézheti, mi a különbség közöttük..

Csak 4 paramétert kell beállítani: animációs típus, animációs funkció, időtartam másodpercben, és ha az animáció végtelen. Ha készen áll, akkor csak a generált HTML és CSS kódot kell megkapnia és megragadnia.

4. Magic animációk

Magic animációk egy hűvös CSS könyvtár, amely lehetővé teszi könnyen helyezhet el speciális effektusú animációkat webhelyén. Például, az elemeket eltűnhetik és ki is nyithatják, balra vagy jobbra nyílhatnak, majd visszatérhetnek, forgathatják le, fel, balra vagy jobbra, és sok más

Mindössze annyit kell tennie, hogy letölti a kódot, a CSS-fájlt a HTML-oldalába, és a jQuery segítségével adja hozzá a megfelelő osztályt a következő módon:

 $ ('. yourdiv'). hover (funkció () $ (ez) .addClass ('magictime puffIn'););

Megváltoztathatja az időzítő beállításait, és a jQuery segítségével végtelen lehet az animáció (a részleteket lásd a readme fájlban).

5. Animate.css

Animate.css egy készletet biztosít hűvös, böngésző CSS3 animációk. Az animációk olyan csoportokba sorolhatók, mint a figyelemkeresők, a visszapattanó bejáratok, a pattogó kilépések, a fading bejáratok és sok más, így valóban nem tud panaszkodni a választás hiánya miatt.

A kódot letöltheti a Github-ból, majd csak a CSS-fájlt kell hozzáadnia a HTML-oldalához, és a megfelelő CSS-osztályokat a HTML-elemekhez, amelyeket animálni szeretne.

6. Bounce.js

Bounce.js egy praktikus JavaScript könyvtár, amely lehetővé teszi bonyolult animációk létrehozása. A Bounce. és finomítsa a tulajdonságokat, ha szükséges.

7. AniJS

AniJS egy szuperkoolos JavaScript könyvtár, amely lehetővé teszi a CSS3 animációk hozzáadását a tervekhez és a kifinomult UI-összetevők építése pl. animált lapok, harmonikák, modálok, csúszómenük, mobilalkalmazások értesítése, görgetés feltárása és még sok más.

Minden modern böngészővel együtt működik, beleértve az iOS-t és az Androidot, nem igényel harmadik fél könyvtárakat, és látványos AniCollection nevű kirakat, ahol könnyedén kísérletezhet a könyvtár által biztosított különböző hatásokkal.

8. Egyetlen elem CSS-fonók

Voltál már valaha is a tervek javítása animált betöltő fonók? Ha a válasz igen, ez az aranyos CSS spinner könyvtár kiváló választás lehet az Ön számára. A spinnerek CSS kódja LESS-ben van írva. Nincsenek beállítások, a kód készen áll, csak a saját HTML és CSS fájljaiba kell beillesztenie.

9. Odométer

Úthosszmérő egy ragyogó eszköz helyezzen hűvös animált mérőket a webhelyére. Ez egy CSS és JavaScript könyvtár, a CSS rész Sass-ban van, és különböző témák közül választhat “Digitális”, “Vasútállomás”, és “Autó”.

Az Odométer használatához hozzá kell adnia a JavaScript-fájlt és a kiválasztott témafájlt a HTML-oldalához, majd a class = "kilométeróra" választó az elemre, amelyet animált mérővé kíván tenni. Ideális választás az adatok vizuális megjelenítésére, vagy a “Hamarosan” az oldal több szemet gyönyörködtető.

10. Snabbt.js

Snabbt.js egy minimalista animációs könyvtár segít könnyen mozgatni a dolgokat. Ha szüksége van egy kis inspirációra, nézd meg a demókat, hogy lássuk, mit érhet el ezzel az intelligens animációs eszközzel, az alábbi képernyőkép az animált időszakos táblázat csak az egyik a Snabbt.js által könnyen megvalósítható lehetőségek közül..

Ha szeretné használni ezt a könyvtárat, írnod kell egy kis JavaScript-et, de mivel az eredmény meglehetősen látványos, ezért valószínűleg megéri a problémát.