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.