Advertisement
  1. Web Design
  2. HTML/CSS
  3. Animation

20 Najlepších CSS animácií na CodeCanyon

Scroll to top

() 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.

Aero - CSS3 Hover EffectsAero - CSS3 Hover EffectsAero - 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ý.

MegaHover Mouse Over EffectsMegaHover Mouse Over EffectsMegaHover Mouse Over Effects

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.

Animatia - CSS Image Hover EffectsAnimatia - CSS Image Hover EffectsAnimatia - CSS Image Hover Effects

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í.

Hover Effects FrameworkHover Effects FrameworkHover Effects Framework

Č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.

Collection of PreloadersCollection of PreloadersCollection of Preloaders

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.

CSS3 Image Hover EffectsCSS3 Image Hover EffectsCSS3 Image Hover Effects

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.

Image Hover CSS LIbraryImage Hover CSS LIbraryImage Hover CSS LIbrary

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.

SVG Logo Scroll Animation CSS3 and JavascriptSVG Logo Scroll Animation CSS3 and JavascriptSVG 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í.

Viavi CSS3 Scroll EffectsViavi CSS3 Scroll EffectsViavi CSS3 Scroll Effects

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á.

CSS3 Spinners LoadersCSS3 Spinners LoadersCSS3 Spinners Loaders
  • 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í.

Midix - CSS3 Animation Effects without jQueryMidix - CSS3 Animation Effects without jQueryMidix - CSS3 Animation Effects without jQuery

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.

CSS3 Hover EffectsCSS3 Hover EffectsCSS3 Hover Effects

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.

VSPreloader - Ultimate CSS Animated PreloadersVSPreloader - Ultimate CSS Animated PreloadersVSPreloader - Ultimate CSS Animated Preloaders

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í.

Heed - Pure CSS3 Animation EffectsHeed - Pure CSS3 Animation EffectsHeed - Pure CSS3 Animation Effects

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.

Ayan - CSS3 Link Hover EffectsAyan - CSS3 Link Hover EffectsAyan - CSS3 Link Hover Effects

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.

Sinister - Pure CSS Image Hover EffectsSinister - Pure CSS Image Hover EffectsSinister - Pure CSS Image Hover Effects

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.

Stylish Social Media Animated Icons StyleStylish Social Media Animated Icons StyleStylish Social Media Animated Icons Style

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.

CSS3 AnimationsCSS3 AnimationsCSS3 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.

Pure CSS3 Image AccordionPure CSS3 Image AccordionPure CSS3 Image Accordion

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.

CSS3 Mega Tooltip Animation PackCSS3 Mega Tooltip Animation PackCSS3 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.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.