20 Nejlepších CSS animací na CodeCanyon

V minulosti existovalo období, kdy jste museli používat Flash, pokud jste chtěli přidat na vaši stránku nějaké vizuální efekty, mimo GIFu. Vrátíme se do dneška a zjistíme, že Flash je mrtvý a CSS3 s HTML5 přinášejí fantastické animace a efekty na web.

Pokud chcete přidat na vaši stránku nebo webový projekt CSS animace, zde je 20 nejlepších CSS animací na CodeCanyon:

1. Aero - CSS3 Hover Effects

Přidá efekt stínovaného aero skleněného snímku - CSS3 Hover Effects.

Je plně responsivní, jednoduše se používá a také se s ním:

• lehce mění barvy a přehazuje z kruhu na čtverec
• kompatibilní se všemi prohlížeči - dokonce i Microsoft Edge
• kompatibilní s SASS
• upravitelné CzS
• a další!

S 10 obsaženými efekty v releasu a dalšími efekty, které se přidají, Aero - CSS3 Hover Effects je skvělý balík CSS animací pro vaše hover efekty.

2. MegaHover Mouse Over Effects

MegaHover Mouse Over Effects nabízí robustní balení CSS3 efektu pro hover, které je Bootstrap 3 kompatibilní.

Také je:

• používa ikony Font Awesome
• kompatibilní mezi prohlížeči
• plně responsivní
• a více

Jednoduše integrujte a modifikujte MegaHover Mouse Over Effects do stovek dobře vypadajících hover efektů.

3. Animatia - CSS Image Hover Effects

Jednoduše použitelný, minimální nahrávací čas a vysoce upravitelný? Animatia CSS Image Hover Effects je přesně takový a ještě mnohem lepší.

Tato várka CSS obsahuje:

• Přes 115 vysoce upravitelných hover efektů
• plně reponsivní a jednoduše použitelné soubory
• čisté CSS3 a Font Awesome ikony
• a více

Použijte Animatia - CSS Image Hover Effects pro styl tlačítek, overlay efekty, popisky a další CSS animace.

4. Hover Effects Framework

Hover Effects Framework je opravdu čisté řešení CSS animací.

Čistý kód, plně responsivní a:

• IcoMoon Ultimate Font
• 4 tvary a 5 barev
• 50+ animací
• a více

Hover Effects framework má čistý kód a nejlepší je, že obsahuje příklady pro začátek s dobře vypadajícími CSS animacemi.

5. Collection of Preloaders

Už možná nebudete potřebovat další kolekci preloaderu, po stažení této kolekce.

Dostanete:

• dobrou dokumentaci pro jednoduché úpravy
  
• jednoduchá a flexibilní sada CSS3 animací
• 27 unikátních preloaderů

Skvělá pro mobilní zařízení, kolekce preloaderů je skvělý přídavek v CSS3 nástrojích.

6. CSS3 Image Hover Effects

Pokud jste viděli jednu CSS animaci pro hover nad snímky, viděli jste je všechny, že?

Ani ne.

CSS3 Image Hover Effects obsahuje pár opravdu pěkných a unikátních efektů.

Obsahuje:

• 22 různých CSS3 hover efektů
• Úplně skvělý a responsivní
• čistý CSS3 kód
• a další

Podívejte se na Bootstrap kompatibilní CSS3 Image Hover Effects.

7. Image Hover CSS Library

Image Hover CSS Library je škálovatelná, jednoduchá knihovna CSS animací, která stojí za to.

Tato nóbl kolekce 58 efektů minimalizována na pouze 25KB.

• funguje s jakýmkoli obsahem
• unikátní hover efekty
• snadno se používá
• a další

Je těžké se odlišit od jiných hover CSS animací, ale Image Hover CSS Library do zvládla.

8. SVG Logo Scroll Animation | CSS3 a Javascript

Je pěkné se odpoutat od obvyklých CSS animací - image hover efekty - a podívat se na něco jako je SVG Logo Scroll Animation | CSS3 and Javascript.

V méně než 4k, přidává krásnou scrollovací stránku SVG animací.

Vytvořte nádherné webové animace pomocí SVG Logo Scroll Animation | CSS3 and Javascript.

9. Viavi CSS3 Scroll Effects

Viavi CSS3 Scroll Effects je velice dobře vypadající řešení CSS3 HTML Scroll animací.

Některé funkce:

• 16 CSS 3 scroll efekty
• jednoduchá implementace
• plně responsivní
• a další

Využívá system mřížky a povoluje dotek pro mobilní použití, Viavi CSS3 Scroll Effects nejen, že vypadá dobře, ale také se dobře implementuje.

10. CSS3 Spinners & Loaders

Potřebujete loader bez gifu?

Žádný problém. CSS3 Spinners & Loaders dodá.

• přes 25 variací
• lehce upravitelné
• lehce rozšiřitelné

CSS3 Spinners & Loaders je dobře zdokumentován a je to řešení pro spinnery a loadery.

11. Midix - CSS3 Animation Effects without jQuery

Použití čistého CSS3, Midix - CSS3 Animation Effects without jQuery dodá sadu 16 CSS animací.

Můžete upravit:

• rychlost animace
• prodleva animace
• barvy ikon

S Midix - CSS3 Animation Effects without jQuery nedostanete pouze skvělou kolekci CSS animací, ale také updaty a přátelskou podporu.

12. CSS3 Hover Effects

CSS3 Hover Effects je další dobrá volba.

Můžete jednoduše změnit:

• barvu
• velikost okraje
• kolečko na čtverec
• mezery mezi bloky textu

S 479 retina ikonami a 20 různými efekty, CSS3 Hover Effects je skvělým zdrojem.

13. VSPreloader - Ultimate CSS Animated Preloaders

Jak to s preloadery bývá, VSPreloader - Ultimate CSS Animated Preloaders je jedno z těch unikátních, kreativních a dobře vypadajících řešení.

Funkce zahrnují:

• 60 pomocníků
• 40 presentů
• 30 animací
• nekonečné barvy

Je taky neskutečně ostrý a unikátní.

Podívejte se blíže na VSPrealoder - Ultimate CSS Animated Preloaders. Myslím že budete ohromeni.

14. Heed - Pure CSS3 Animation Effects

Heed - Pure CSS3 Animation Effects nabízí vše co můžete chtít od kolekce CSS animací.

Jednoduše se instaluje, upravuje a konfiguruje s SCSS (soubor přiložen).

• 20 možností designu barev
• Skvělé ikony
• 15 efektů
• a další

Heed - Pure CSS3 Animation Effects je retina friendly a obsahuje updaty zdarma.

15. Ayan - CSS3 Link Hover Effects

Zatímco mnoho CSS animací se zaměřuje na snímky a efekty stránek, Ayan CSS3 Link Hover Effects nabízí impresivní seznam hover efektů.

Je zde 30 skvěle vypadajících CSS3 hover efektů a:

• solidní podporu prohlížečů
• help dokumentace
• moderní animace
• a další

Ayan - CSS3 Link Hover Effects balík je kreativní, přesný a přídá krásný dojem CSS animací bez toho aniž by byl moc oslnivý.

16. Sinister - Pure CSS Image Hover Effects

Obsahuje přes 100 hover efektů, Sinister - Pure CSS Image Hover Effects nabízení zajímavé číslo dobře vytvořených efektů.

Obsahuje vice než:

• 22 obsahových efektů přechodu
• 18 přechodů efektu překrytí
• 23 efektu přechodu tlačítek
• 100 hover efektů

Bez použití JavaScriptu nebo jQuery a použitím čistého CSS, Sinister - Pure CSS Image Hover effects představuje:

• zoom-in a zoom-out
• rotace X a rotace Y
• rotace doprava a doleva
• rotace a změna měřítka
• kostkový přechod
• hover přes vrstvu
• a další

17. Stylish Social Media Animated Icons Style

Přidejte krásné CSS animace na vaše ikony sociálních medií pomocí stylových animovaných ikon.

S čistým designem a devíti různými styly ze kterých můžete vybírat, si také užijete:

• jednoduchá implementace a upravitelnost
• kvalitní kód a dokumentace
• bez závislosti na snímcích nebo ikonách
• podpora více prohlížečů
• a další

Stylish Social Media Animated Icons Style přidá krásný nádech barev a CSS animací do vašich ikon sociálních medií.

18. CSS3 Animace

Jednoduše animujte váš div, p a body HTML s CSS3 Animations.

Toto je nádherný snippet, který může být použit a aplikován v mnoha různých situacích.

Obsahuje:

• jednoduché použití a úprava
• pouze CSS3, žádný JavaScript
• 10+ animací

Chcete přidat CSS3 Animations do vaši sady nástrojů?

19. Pure CSS3 Image Accordion

Vytvořte váš vlastní slider nebo podobné pomoci Pure CSS3 Image Accordion pro dobře vypadající CSS animace.

je to:

• plně responsivní
• nemá fixní šířku
• čtyři možnosti popisu
• jednoduše upravitelná

Zvizualizujte hudbu s Pure CSS3 Image Accordion.

20. CSS3 Mega Tooltip Animation Pack

Unaveni jednoduchými tooltipy?

Přidejte nějaké CSS animace pomocí CSS3 Mega Tooltip Animation Pack.

Tento CSS tooltip animaci obsahuje:

• 10 efektů animací
• 8 barevných přednastavení
• dokumentace
• a další

CSS3 Mega Tooltip Animation Pack také obsahuje podporu Internet Exploreru.

Závěr

Dokonce i s různými CSS animacemi, které jsou k dispozici na Envato Marketu, je možné, že nenajdete přesně to co hledáte.

Není problém. Můžete si vytvořit váš vlastní!

Podivejte se na Envato eBooky jako Mastering CSS3, vyberte si jeden z mnoha různých kurzů kódování nebo sledujte CSS3 Code Tutorial.