20 Najlepších CSS animácií na CodeCanyon
() translation by (you can also view the original English article)
V minulosti existovalo období, kedy ste museli používať Flash, ak ste chceli pridať na vašu stránku nejaké vizuálne efekty, mimo GIFu. Vrátime sa do dneška a zistíme, že Flash je mŕtvy a CSS3 s HTML5 prinášajú fantastické animácie a efekty na web.
Ak chcete pridať na vašu stránku alebo webový projekt CSS animácie, tu je 20 najlepších CSS animácií na CodeCanyon:
1. Aero - CSS3 Hover Effects
Pridá efekt tieňovaného aero skleneného snímke - CSS3 Hover Effects.



Je plne responsívna, jednoducho sa používa a tiež sa s ním:
- ľahko mení farby a prehadzuje z kruhu na štvorec
- kompatibilný so všetkými prehliadačmi - dokonca aj Microsoft Edge
- kompatibilný s SASS
- upraviteľné CZŠ
- a ďalšie!
S 10 obsiahnutými efekty v releasu a ďalšími efekty, ktoré so pridajú, Aero - CSS3 Hover Effects je skvelý balík CSS animácií pre vaše hover efekty.
2. MegaHover Mouse Over Effects
MegaHover Mouse Over Effects ponúka robustný balenie CSS3 efektu pre hover, ktoré je Bootstrap 3 kompatibilný.



Taktiež:
- používa ikony Font Awesome
- kompatibilné medzi prehliadačmi
- plne responsívna
- a viac
Jednoducho integrujte a modifikujte MegaHover Mouse Over Effects do stoviek dobre vyzerajúcich hover efektov.
3. Animatia - CSS Image Hover Effects
Jednoducho použiteľný, minimálny nahrávací čas a vysoko upraviteľný? Animatia CSS Image Hover Effects je presne taký a ešte oveľa lepšie.



Táto várka CSS obsahuje:
- Cez 115 vysoko upraviteľných hover efektov
- plne reponsivní a jednoducho použiteľné súbory
- čisté CSS3 a Font Awesome ikony
- a viac
Použite Animatia - CSS Image Hover Effects pre štýl tlačidiel, overlay efekty, popisky a ďalšie CSS animácie.
4. Hover Effects Framework
Hover Effects Framework je naozaj čisté riešenie CSS animácií.



Čistý kód, plne responsívny a:
- IcoMoon Ultimate Font
- 4 tvary a 5 farieb
- 50+ animácií
- a viac
Hover Effects framework má čistý kód a najlepšie je, že obsahuje príklady pre začiatok s dobre vyzerajúcimi CSS animáciami.
5. Collection of Preloaders
Už možno nebudete potrebovať ďalšiu kolekciu preloader, po stiahnutí tejto kolekcie.



dostanete:
- dobrou dokumentáciu pre jednoduché úpravy
- jednoduchá a flexibilná sada CSS3 animácií
- 27 unikátnych preloader
Skvelá pre mobilné zariadenia, kolekcia preloaderov je skvelý prídavok v CSS3 nástrojoch.
6. CSS3 Image Hover Effects
Ak ste videli jednu CSS animáciu pre hover nad snímky, videli ste ich všetky, že?
Ani nie.
CSS3 Image Hover Effects obsahuje pár naozaj pekných a unikátnych efektov.



Obsahuje:
- 22 rôznych CSS3 hover efektov
- Úplne skvelý a responsívna
- čistý CSS3 kód
- a ďalšie
Pozrite sa na Bootstrap kompatibilné CSS3 Image Hover Effects.
7. Image Hover CSS Library
Image Hover CSS Library je škálovateľná, jednoduchá knižnica CSS animácií, ktorá stojí za to.



Táto nóbl kolekcia 58 efektov minimalizovaná na iba 25KB.
- funguje s akýmkoľvek obsahom
- unikátny hover efekty
- ľahko sa používa
- a ďalšie
Je ťažké sa odlíšiť od iných hover CSS animácií, ale Image Hover CSS Library do zvládla.
8. SVG Logo Scroll Animation | CSS3 and Javascript
Je pekné sa odpútať od obvyklých CSS animácií - image hover efekty - a pozrieť sa na niečo ako je SVG Logo Scroll Animation | CSS3 and Javascript.



V menej ako 4k, pridáva krásnu scrollovacie stránku SVG animácií.
Vytvorte nádherné webové animácie pomocou SVG Logo Scroll Animation | CSS3 and Javascript.
9. Viavi CSS3 Scroll Effects
Viavi CSS3 Scroll Effects je veľmi dobre vyzerajúci riešenie CSS3 HTML Scroll animácií.



Niektoré funkcie:
- 16 CSS 3 scroll efekty
- jednoduchá implementácia
- plne responsívna
- a ďalšie
Využíva system mriežky a povoľuje dotyk pre mobilné použitie, Viavi CSS3 Scroll Effects nielen, že vyzerá dobre, ale tiež sa dobre implementuje.
10. CSS3 Spinners & Loaders
Potrebujete loader bez gifu?
Žiadny problém. CSS3 Spinners & Loaders dodá.



- cez 25 variácií
- ľahko upraviteľné
- ľahko rozšíriteľné
CSS3 Spinners & Loaders je dobre zdokumentovaný a je to riešenie pre spinnery a Loader.
11. Midix - CSS3 Animation Effects bez jQuery
Použitie čistého CSS3, Midix - CSS3 Animation Effects without jQuery dodá sadu 16 CSS animácií.



Môžete upraviť:
- rýchlosť animácie
- oneskorenie animácie
- farby ikon
S Midix - CSS3 Animation Effects bez jQuery nedostanete len skvelú kolekciu CSS animácií, ale aj updaty a priateľskú podporu.
12. CSS3 Hover Effects
CSS3 Hover Effects je ďalšia dobrá voľba.



Môžete jednoducho zmeniť:
- farbu
- veľkosť okraja
- koliesko na štvorec
- medzery medzi blokmi textu
S 479 retina ikonami a 20 rôznymi efektmi, CSS3 Hover Effects je skvelým zdrojom.
13. VSPreloader - Ultimate CSS Animated Preloaders
Ako to s preloader býva, VSPreloader - Ultimate CSS Animated Preloaders je jedno z tých unikátnych, kreatívnych a dobre vyzerajúcich riešenie.



Funkcie zahŕňajú:
- 60 pomocníkov
- 40 Present
- 30 animácií
- nekonečné farby
Je taky neskutočne ostrý a unikátne.
Pozrite sa bližšie na VSPrealoder - Ultimate CSS Animated Preloaders. Myslím že budete ohromení.
14. Heed - Pure CSS3 Animation Effects
Heede - Pure CSS3 Animation Effects ponúka všetko čo môžete chcieť od kolekcie CSS animácií.



Jednoducho sa inštaluje, upravuje a konfiguruje s SCSS (súbor priložený).
- 20 možností dizajnu farieb
- skvelé font ikony
- 15 efektov
- a ďalšie
Heede - Pure CSS3 Animation Effects je retina friendly a obsahuje updaty zadarmo.
15. Ayan - CSS3 Link Hover Effects
Zatiaľ čo mnoho CSS animácií sa zameriava na snímky a efekty stránok, Ayan CSS3 Link Hover Effects ponúka impresívne zoznam hover efektov.



Je tu 30 skvele vyzerajúcich CSS3 hover efektov a:
- solídny podporu prehliadačov
- help dokumentácia
- moderný animácie
- a ďalšie
Ayan - CSS3 Link Hover Effects balík je kreatívny, presný a pridá krásny dojem CSS animácií bez toho aby bol moc oslnivý.
16. Sinister - Pure CSS Image Hover Effects
Obsahuje vyše 100 hover efektov, Sinister - Pure CSS Image Hover Effects ponúkanie zaujímavé číslo dobre vytvorených efektov.



Obsahuje viac ako:
- 22 obsahových efektov prechodu
- 18 prechodov efektu prekrytia
- 23 efektu prechodu tlačidiel
- 100 hover efektov
Bez použitia JavaScriptu alebo jQuery a použitím čistého CSS, Sinister - Pure CSS Image Hover effects predstavuje:
- zoom-in a zoom-out
- rotácie X a rotácie Y
- rotácie doprava a doľava
- rotácie a zmena mierky
- kockový prechod
- hover cez vrstvu
- a ďalšie
17. Stylish Social Media Animated Icons Style
Pridajte krásne CSS animácie na vaše ikony sociálnych médií pomocou štýlových animovaných ikon.



S čistým dizajnom a deviatimi rôznymi štýlmi z ktorých môžete vyberať, si tiež užijete:
- jednoduchá implementácia a upraviteľnosť
- kvalitný kód a dokumentácia
- bez závislosti na snímkach alebo ikonách
- podpora viacerých prehliadačov
- a ďalšie
Stylish Social Media Animated Icons Style pridá krásny nádych farieb a CSS animácií do vašich ikon sociálnych médií.
18. CSS3 Animations
Jednoducho Animujte váš div, p a body HTML s CSS3 Animations.



Toto je nádherný snippet, ktorý môže byť použitý a aplikovaný v mnohých rôznych situáciách.
obsahuje:
- jednoduché použitie a úprava
- iba CSS3, žiadny JavaScript
- 10+ animácií
Chcete pridať CSS3 Animations do vašu sady nástrojov?
19. Pure CSS3 Image Accordion
Vytvorte váš vlastný slider alebo podobné pomôcť Pure CSS3 Image Accordion pre dobre vyzerajúce CSS animácie.



je to:
- plne responsívna
- nemá fixný šírku
- štyri možnosti popisu
- jednoducho upraviteľná
Zvizualizujte hudbu s Pure CSS3 Image Accordion.
20. CSS3 Mega Tooltip Animation Pack
Unavení jednoduchými tooltipy?
Pridajte nejaké CSS animácie pomocou CSS3 Mega Tooltip Animation Pack.



Tento CSS tooltip animáciu obsahuje:
- 10 efektov animácií
- 8 farebných prednastavení
- dokumentácia
- a ďalšie
CSS3 Mega Tooltip Animation Pack tiež obsahuje podporu Internet Exploreru.
Záver
Dokonca aj s rôznymi CSS animáciami, ktoré sú k dispozícii na Envato Markete, je možné, že nenájdete presne to, čo hľadáte.
Nie je problém. Môžete si vytvoriť váš vlastný!
Pozrite sa na Envato eBook ako Mastering CSS3, vyberte si jeden z mnohých rôznych kurzov kódovania alebo sledujte CSS3 Code Tutorial.