20 Nejlepších CSS animací na CodeCanyon
() translation by (you can also view the original English article)
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.