10 animačných nástrojov CSS3 by ste si mali zapamätať

Keďže ľudia majú tendenciu ľahšie vnímať veci, ktoré sa pohybujú, inteligentne používané animácie môžu zlepšiť používateľskú skúsenosť s webom poukazujúc na dôležité prvky, ktoré musia používatelia rýchlo zaznamenať.

CSS3 zaviedla novú animačnú syntax, ktorá vám pomôže dosiahnuť veľa zaujímavých vecí vo vašom dizajne. Budovanie chladných animácií môže byť niekedy komplikované a časovo náročné, to je kedy animaiton knižnice a generátory môžu byť výborne použité.

Pozrite si niektoré z animácií, ktoré sa dajú vytvoriť pomocou funkcie CSS:

• 38 Inšpirácia animácií CSS3
• 15 krásnych textových efektov vytvorených pomocou CSS
• 30 cool animácie CSS, ktoré musíte vidieť
• Ako vytvoriť efekt odrazu pomocou animácie CSS3

V tomto príspevku sa pozrieme na 10 brilantných nástrojov, ktoré vám uľahčia a rýchlejšie vytvárajú vlastné animácie.

1. Generátor animácie CSS3Gen CSS3

CSS3Gen vám poskytuje ľahko použiteľný generátor animácií, ktorý vám umožní rýchlo generovať základné animácie. Hoci nebudete s týmto nástrojom robiť komplikované umelecké diela, je to skvelá voľba, ak chcete vytvoriť štandardnú animáciu bez príliš veľkého rozruchu.

vy nemusíte robiť svoje ruky špinavé kódom, ako môžete nastaviť vlastnosti na formulári, uvidíte výsledok, potom jednoducho skopírujte a prilepte kód do svojho vlastného súboru CSS.

2. CSS Animate

Ak ty potrebujú zložitejšie animácie, môžete nájsť CSS animovať užitočné. Má vyspelý používateľský rozhranie, môžete nastaviť o niečo viac vlastností a môžete sledovať, zastaviť a reštartovať animáciu pomocou intuitívnej časovej osi.

Existujú tiež príklady animácií, ako napríklad “odskočiť”, “Triasť”, a “Hojdačka”, ktoré môžete načítať do generátora a upraviť kód podľa vašich potrieb.

3. Coveloping CSS Animation Generator

Covelopingje to asi najlepšia voľba ak ste noví s animáciami CSS3, a chcú rýchlo pochopiť, ako fungujú. Tento jednoduchý, ale výkonný nástroj vám umožňuje otestovať rôzne typy animácií, ktoré ponúka CSS3, a ľahko zistiť, aký je rozdiel medzi nimi.

Stačí nastaviť 4 parametre: typ animácie, animáciu, trvanie v sekundách a ak je animácia nekonečná. Keď ste pripravení, stačí získať a chytiť vygenerovaný kód HTML a CSS.

4. Magické animácie

Magické animácie je cool CSS knižnica, ktorá umožňuje jednoducho umiestnite animácie so špeciálnymi efektmi na vašich stránkach. Napríklad môžete prvky vyčistiť dovnútra a von, otvárať doľava alebo doprava, potom sa vrátiť, otočiť dolu, hore, doľava alebo doprava a mnoho ďalších

Jediné, čo musíte urobiť, je prevziať kód, zahrnúť súbor CSS do vašej stránky HTML a pridať príslušnú triedu pomocou jQuery nasledujúcim spôsobom:

 $ ('. yourdiv'), hover (funkcia () $ (toto) .addClass ('magictime puffIn'););

Môžete tiež zmeniť nastavenia časovača a vytvoriť nekonečnú animáciu pomocou jQuery (viac informácií nájdete v súbore readme).

5. Animate.css

Animate.css vám poskytuje súbor cool, cross-browser CSS3 animácie. Animácie sú rozdelené do skupín, ako sú hľadajúci pozornosti, skákacie vstupy, skákacie východy, vyblednuté vstupy a mnoho ďalších, takže sa skutočne nemôžete sťažovať na nedostatok voľby.

Môžete si stiahnuť kód z Github, potom stačí pridať súbor CSS na vašu HTML stránku a príslušné triedy CSS do elementov HTML, ktoré chcete animovať.

6. Bounce.js

Bounce.js je šikovná knižnica JavaScript, ktorá vám umožní vytvárať komplikované animácie. Bounce.js má vyspelé používateľské rozhranie, ktoré umožňuje buď pridať do animácie rôzne zložky - napríklad uvoľnenie, trvanie, oneskorenie a počet odskočení, alebo vybrať predvoľbu pripravenú na použitie, potom prehrať animáciu, a jemne vyladiť vlastnosti, ak je to potrebné.

7. AniJS

AniJS je superkólový JavaScript knižnica, ktorá vám umožní pridať CSS3 animácie do svojich návrhov, a vybudovať sofistikované komponenty používateľského rozhrania ako sú animované karty, akordeóny, modály, posuvné ponuky, upozornenia o mobilných aplikáciách, posúvače a mnohé ďalšie.

Spolupracuje so všetkými modernými prehliadačmi vrátane iOS a Android, nepotrebuje žiadne knižnice tretích strán a má veľkolepú vitrínu s názvom AniCollection, kde môžete jednoducho experimentovať s rôznymi efektmi, ktoré poskytuje knižnica.

8. Jednoduché elementy CSS Spinners

Už ste niekedy chceli vylepšiť vaše návrhy animované nakladače? Ak je odpoveď áno, táto roztomilá knižnica CSS spinner môže byť pre vás vynikajúcou voľbou. Kód CSS pre spinery je napísaný v LESS. Neexistujú žiadne nastavenia, kód je hotový, stačí ho vložiť do vlastných súborov HTML a CSS.

9. Počítadlo kilometrov

počítač kilometrov je vynikajúcim nástrojom umiestnite do svojho webu cool animované merače. Je to CSS a JavaScript knižnica, CSS časť je napísaná v Sass, a môžete si vybrať z rôznych tém, ako je “digitálne”, “Vlaková stanica”, a “Auto”.

Ak chcete použiť počítadlo kilometrov, musíte do svojej stránky HTML pridať súbor JavaScript a zvolený súbor témy class = "stav kilometrov" prepínač na prvok, ktorý chcete vytvoriť do animovaného merača. Ideálna voľba na vizuálne zobrazovanie údajov alebo na vytvorenie “Už čoskoro” stránku viac pútavý.

10. Snabbt.js

Snabbt.js je minimalistická animačná knižnica, ktorá pomáha vám ľahko pohybovať veci. Ak potrebujete trochu inšpirácie, pozrite sa na demonštrácie, aby ste zistili, čo môžete dosiahnuť pomocou tohto inteligentného animačného nástroja, animovaná periodická tabuľka na snímke nižšie je len jedným z mnohých možností Snabbt.js umožňuje jednoduchú implementáciu.

Ak chcete túto knižnicu použiť, musíte napísať JavaScript, ale výsledkom je pomerne veľkolepý, takže je to pravdepodobne za problém.