30 Awesome SVG animáció az inspirációhoz

A tervezők a HTML elemekben animációkat hoztak létre CSS használatával. Azonban a HTML elemek elemeinek, alakjainak és mások létrehozásának korlátozásai miatt természetesen az SVG-re fordulnak, ami érdekesebb lehetőségeket kínál.

Az SVG-vel együttműködve élvezhetjük az SVG animáció számára a jó böngészőprofilt, és több módja van az új animáció létrehozásának. Használhatja mind a beépített SVG animációs funkcionalitást, mind a CSS3 animációt (ne feledje, hogy a CSS nem mindent tehet, így még mindig szükség van a JavaScript-re). Egy másik lehetőség a JavaScript motorok, például a GSAP vagy a Snap használata. A JS az animáció létrehozásának jó gyakorlata.

Itt hihetetlen animált SVG-t készítettem. Néhányan SVG animációt használnak, mások CSS transzformációt használnak az alap animációhoz, a többiek pedig a JavaScript segítségével.

Sean McCaffery által készített határ animáció

Csak a CSS-vel készült, a szegély a szöveg körül zökkenőmentesen képződik, amikor az egér fölé mozog “LEBEG” utasítás.

Nikolay Talanov Elasztikus SVG oldalsávja

Az oldalsáv rugalmasvá válik, amikor megpróbálja elhúzni az oldaltól. Egy szép koncepciót alkalmaztak az Material Design által inspirált alkalmazás oldalsávon.

Húzza le a frissítést Nikolay Talanov

A legtöbb oldal lehetővé teszi “lehúz” az oldal frissítéséhez. Ezzel az animációval, amikor “kiadás” az oldal, a Küldés ikon sík ikonra változik, és felszabadul a levegőbe.

Animált színátmenet a Patrick Young szövegében

Íme egy finom, de nehezen elhúzódó mozgó szöveges gradiens, amelyet a tipográfiai szerelmeseinek szeretni fog.

Nikolay Talanov szív-animációja

Ez az animáció megmutatja, hogyan készül egy szív ikon két körből és egy négyzetből. Az átalakítás CSS animációval történik.

Utazzunk a jjperezaguinaga útján

Olyan animáció, amely a városokat és a világ népszerű turisztikai célpontjait illusztrálja. A mozgások és átalakítások CSS animáció segítségével jönnek létre.

Tamino Martinius animációs menüje

A hamburger ikon keresztrejtővé alakuló morphing animációja. Nézze meg, hogy a két objektum között milyen sima az átmenet.

Animált Infographic Sdras

Sarah Drasner fantasztikus animációja, a GSAP idővonalának köszönhetően. Ez egy animációval készült infographic. Használja a csúszkát a keretek eléréséhez bármely ponttól.

Rain-Bros nem szereti a JS-t a cihadturhan-tól

Egyedülálló és vicces hurok animáció a karakterek séta. Az objektumok mozgása ebben a demóban az SVG és a CSS3 animáció kombinációja. A lábak SVG animációt használnak, míg más részek CSS3 animációt használnak.

Mohamad Mohebifar órája

Nézze meg, hogy a második kéz sima mozgása ebben az órában mutatja az aktuális időt. Az animáció teljes egészében az SVG animációs funkcióval készült.

Rainbow Rocket Man Chris Gannon által

Egy űrhajós, aki a szivárványos hajtóművel (pack) űrbe dob. Szép animáció a GSAP Tweenmax plugin segítségével.

Luigi De Rosa animált ikonja

Az animált SVG ikonok felett azonban megnézheti, mit tehetnek. A készítő ezt a GSAP-ot használta.

Flat Workspace készítette: Hoàng Nhật

Az animáció egy lapos stílusú design munkaterületet ábrázol. A készítő a GSAP-ot használta, hogy ez a fantasztikus animáció egy munkaállomás kialakításában legyen.

Hamish Williams által kattintható animált ikon

Ez egy jó animáció, amely a snap.svg könyvtárat használja. Kattints ide a levelezés megjelenítéséhez “küldött”.

Chris Gannon búvárkodás

Voltál már áthagyott kövek a tó felszínén? Itt egy egyszerű SVG útvonal animáció, amely ezt szemlélteti, de nem kövekkel, és nincs tó.

Mozgás a weben a LegoMushroom által

Animáció, szép dallam, szuper hűvös bejárat a szöveghez, mi nem tetszik? Ezt a mo.js, egy mozgásgrafikus JavaScript könyvtár építi.

Animált író betűtípus Lee Porter

Az SVG használatával az alakzatot felvázoló útvonal-animáció készítéséhez használhatja azt a tipográfia, mint amilyen ez a készítő. Az elmosódás hatására félelmetesebbé válik.

Lucey Bebber étkezési menüje

Jó szórakozást kell érezni az SVG szűrő használatával és a CSS animáció hozzáadásával. Az eredmény valósághű és hűvös, és négy különböző változatban játszhat.

Marco Barría új torta

Hogyan készítsünk egy SVG és CSS animációval készített, rétegelt születésnapi torta.

Köszönöm Rachel Smith

Csak nézd meg ezt a félelmetes animációt egy egyszerű köszönet megjegyzéséről. Az SVG és a GSAP TweenMax könyvtár segítségével jön létre.

CSS vs SVG Mario Sanchez Maselli

Most nézzük meg a CSS és az SVG animáció összehasonlítását, látod a különbséget?

Mark Nelson sétáló kutyája

Az SVG animálásának másik módja a sprites képek használata, mint ahogy ez az alkotó.

Homokóra betöltő Leela

A tiszta SVG animáció (SMIL) segítségével készült kreatív munka; nincs CSS vagy JS, hogy itt dolgozzon.

Logo animáció Adem ilter

Íme egy szép animált logó intro, inline SVG animáció segítségével. A CSS-t vagy a JS-t nem használták arra, hogy mindent működjön.

Jonas Badalic statisztika animációja

Egy szép statisztikai gráf az SVG animációval, amelyet a Snap.SVG könyvtár táplál.

Ouroboros Noel Delgado

Egy csodálatos SVG animációs út. Először az alkotó az útvonalon húzott egy útvonalat az SVG-n, mielőtt a tween.js-t használja az animáció hozzáadásához.

Lucas Bebber kreatív Gooey-effektusai

Íme az SVG szűrő hét kreatív felhasználása, ami egy lágyszerűtlen hatást eredményez. A zenei megjelenítő a kedvencem, az animáció nagyon szép.

Dobd el a tehenet Sarah Drasner

Ez egy SVG animáció, amelyet a TweenMax táplál, de csak szórakoztató jellegű. Tartsa és húzza a tehenet a bolygón. Az "orbit".

Animált Logo az Ali

Az animáció egy szép kis kiegészítés lehet egy buborékos sör logó számára. A szép kis úszó buborékok kizárólag SVG natív animációs szintaxissal épülnek fel.