10 CSS3 Animační nástroje, které byste měli záložku
Protože lidé mají tendenci snadněji vnímat věci, které se pohybují, inteligentně používané animace mohou vylepšit uživatelský komfort stránek upozornit na důležité prvky, které uživatelé potřebují rychle upozornit.
CSS3 zavedla novou syntaxi animace, která vám pomůže dosáhnout mnoha zajímavých věcí ve vašich návrzích. Vytváření skvělých animací může být někdy komplikované a časově náročné, to je, když lze knihovny a generátory animaiton výborně používat.
Podívejte se na některé animace umožněné pomocí CSS:
- 38 Inspirující ukázky animace CSS3
- 15 Krásné textové efekty vytvořené pomocí CSS
- 30 Cool CSS animací, které musíte vidět
- Jak vytvořit efekt odrazu s animací CSS3
V tomto příspěvku se podíváme na 10 brilantních nástrojů, které mohou usnadnit a urychlit vytváření vlastních animací.
1. CSS3Gen CSS3 Animační generátor
CSS3Gen Poskytuje snadno použitelný generátor animací, který umožňuje rychle generovat základní animace. Ačkoli s tímto nástrojem nebudete dělat složitá umělecká díla, je to skvělá volba, pokud chcete vytvořit standardní animaci bez přílišného rozruchu.
Vy nemusíte dělat své ruce špinavé kódem, jak můžete nastavit vlastnosti ve formuláři, zobrazit náhled výsledku a jednoduše zkopírovat a vložit kód do vlastního souboru CSS.
2. CSS Animate
jestli ty potřebují složitější animace, můžete najít CSS Animate užitečný. Má vyspělejší uživatelské rozhraní, můžete nastavit o něco více vlastností a animaci můžete sledovat, zastavit a restartovat pomocí intuitivní časové osy.
Tam jsou také Příklad animace, jako je “Odskočit”, “Otřást”, a “Houpačka”, můžete načíst do generátoru a upravit kód podle vašich potřeb.
3. Zahrnutí CSS Animation Generator
PokrytíGenerátor animace animace je pravděpodobně tou nejlepší volbou pokud jste noví s animacemi CSS3, a chtějí rychle pochopit, jak fungují. Tento jednoduchý, ale výkonný nástroj umožňuje testovat různé typy animací, které CSS3 nabízí, a snadno zjistit, jaký je rozdíl mezi nimi..
Musíte nastavit pouze 4 parametry: typ animace, funkci animace, dobu trvání v sekundách a animaci nekonečnou. Když jste připraveni, stačí sehnat vygenerovaný HTML a CSS kód.
4. Kouzelná animace
Kouzelné animace je cool CSS knihovna, která umožňuje snadno umístit animace se speciálními efekty na vašich stránkách. Například můžete vytvořit prvky zmizet dovnitř a ven, otevřít doleva nebo doprava, pak se vrátit, otočit dolů, nahoru, doleva nebo doprava a mnoho dalších
Jediné, co musíte udělat, je stáhnout kód, zahrnout soubor CSS do stránky HTML a přidat odpovídající třídu pomocí nástroje jQuery následujícím způsobem:
$ ('. yourdiv') hover (function () $ (this) .addClass ('magictime puffIn');); Můžete také změnit nastavení časovače a pomocí animace jQuery vytvořit nekonečnou animaci (více viz soubor readme).
5. Animate.css
Animate.css vám poskytne sadu cool, cross-browser CSS3 animace. Animace jsou rozděleny do skupin, jako jsou pozornostníci, skákací vstupy, skákací východy, vybledlé vstupy a mnoho dalších, takže si nemůžete stěžovat na nedostatek výběru.
Kód si můžete stáhnout z Githubu, poté stačí přidat soubor CSS na stránku HTML a příslušné třídy CSS do prvků HTML, které chcete animovat..
6. Bounce.js
Bounce.js je praktická JavaScript knihovna, která vám umožní vytvářet komplikované animace. Bounce.js má vyspělé uživatelské rozhraní, které vám umožní buď přidat do komponenty animace různé komponenty - například uvolnění, délku trvání, zpoždění a počet odrazů - nebo vybrat přednastavení připravené k použití a poté přehrát animaci. a doladit vlastnosti, pokud je to nutné.
7. AniJS
AniJS je supercool JavaScript knihovna, která vám umožní přidat CSS3 animace do vašich návrhů, a to vybudovat sofistikované komponenty uživatelského rozhraní jako jsou animované karty, akordeony, modály, posuvné nabídky, oznámení o mobilních aplikacích, odhalení posouvání a mnoho dalších.
Pracuje se všemi moderními prohlížeči včetně iOS a Android, nepotřebuje žádné knihovny třetích stran a má velkolepou přehlídku nazvanou AniCollection, kde můžete snadno experimentovat s různými efekty, které poskytuje knihovna..
8. Single Element CSS Spinners
Už jste někdy chtěli zlepšit své návrhy s animované nakladače? Pokud je odpověď ano, tento roztomilý CSS spinner knihovna může být vynikající volbou pro vás. Kód CSS pro číselníky je napsán v LESS. Nejsou žádná nastavení, kód je připraven, stačí jej vložit do vlastních HTML a CSS souborů.
9. Počítadlo kilometrů
Počítadlo kilometrů je skvělý nástroj umístěte na své stránky skvělé animované metry. Jedná se o knihovnu CSS a JavaScript, část CSS je napsána v jazyce Sass a můžete si vybrat z různých témat, jako je například “Digitální”, “Vlakové nádraží”, a “Auto”.
Chcete-li použít Počítadlo kilometrů, musíte přidat soubor JavaScriptu a vybraný soubor motivu na stránku HTML, poté na soubor class = "odometer" vyberte prvek, který chcete vytvořit v animovaném metru. Ideální volba vizuálně reprezentovat data, nebo dělat a “Brzy” stránka více oko-lov.
10. Snabbt.js
Snabbt.js je minimalistická animační knihovna pomáhá snadno pohybovat v okolí. Pokud potřebujete malou inspiraci, podívejte se na ukázky a zjistěte, čeho můžete dosáhnout pomocí tohoto inteligentního animačního nástroje, animovaná periodická tabulka na níže uvedeném obrázku je jen jednou z mnoha možností, jak Snabbt.js snadno implementovat.
Pokud chcete používat tuto knihovnu, musíte napsat malý JavaScript, ale výsledek je poměrně velkolepý, takže to asi stojí za to..
