Kuinka lisätä animaation SVG: hen CSS: llä

Sep 13, 2025
Miten tehdään
Image: Web Designer
[Kuva: Web Designer]

Kun on animointi SVGS: n kanssa, yksi tärkeä turn-off voi olla ajatus saada alas JavaScript-kirjastoihin. Tämän ei kuitenkaan tarvitse olla. CSS pystyy käsittelemään yksittäisten polkujen valitsemista SVG: n sisällä luomaan vaikutuksia. Vain tietäen perusasiat voi tarkoittaa, että on mahdollista kääntää tasaiset, klish kuvakkeet jotain hieman vaikuttavampaa. Joten ehkä on aika juosta SVG-optimoinnin ja animaation perustavanlaatuisten vaiheiden kautta. Kun ne on integroitu eri malleihin, ei kestä kauan, että mahdollisuudet ovat loputtomia.

Lisää liikkeen inspiraatiota tarkastele Creative BLOQ: n opas CSS-animaatioesimerkkejä ja miten ne koodaavat.

Tallenna £ 100 kanssa super varhainen lintu lippu Luo CSS , Creative Bloq, Web Designer Magazine ja Net Magazine isännöi yhden päivän Web-konferenssin. Kirjaa täältä .

01. Luo ja tallenna

Ensinnäkin luo SVG työskennellä. Tätä opetusohjelmaa käytämme Illustratorissa valmistettua yksinkertaista kuvaa. Kun käytät Illustratoria viemään SVG: n vähentämään arven kokoa graafin mukaan, napsauta sitten Tallenna nimellä. Valitse SVG "Tallenna nimellä Tyyppi" -pudotusvalikosta, sitten SVG-asetusten vuoropuhelun "SVG-koodi ...".

02. Optimoi verkko

SVG screenshot

Klikkaa kuvaketta oikeassa yläkulmassa Suurenna kuvaa [Kuva: SVGOMG]

Tarpeettomien tunnisteiden leikkaaminen tekee kuvan helpommin käsittelemään. Tämä voidaan tehdä manuaalisesti kopioimalla koodi suosikkimittarisi ja poistamalla tyhjiä tunnisteita ja metatietoja. Vaihtoehtoisesti fantastinen resurssi kutsutaan Svgomg tekee tämän automaattisesti. Liitä koodi SVGOMG-liitännän "tahna margup" -alueelle, kopioi sitten kuva uudelleen oikealla puolella olevasta painikkeella.

03. Aseta HTML-asiakirja

Avaa valintasivalintasi ja määritä tyhjä HTML-asiakirja. Kirjoitamme CSS-animaation tiedostoon Main.css , joten luo tämä myös. Jotta asiat keskittyvät animaatioon, olemme vetäneet CSS-vain Bootstrap 4.1.3: n CSS-versioon.

04. Rakenna ulkoasu

Rakennetaan ulkoasun luut ja tekevät tilaa SVG: lle. Olemme lisänneet otsikon ja kaksi saraketta: yksi vasemmalle jollekin tekstille ja yksi oikealla, joka pitää SVG: n, että tulemme animaatiota. Voit herättää sivua ylöspäin, käytä toista, staattista, SVG: tä taustana kehon tunnisteella.

05. Aseta SVG

Käytämme animaatiomme tekemään esittely sivun yläreunaan mielenkiintoisemmaksi. Liitä optimoitu SVG-koodi sivun toiseen sarakkeeseen. Jos käytät bootstrapia, anna SVG-luokka img-neste Varmista, että se vaahdottaa matkapuhelimissa.

06. Lisää luokat SVG: hen

Luokkien lisääminen SVG: lle sallii CSS: n valita yksittäiset muodot kuvan sisällä. Tämä tarkoittaa, että voit animoida kuvan erilaisia ​​muotoja eri aikoina ja luoda monimutkaisempi vaikutus. 

 & lt; svg & gt;
& lt; g & gt;
& lt; rect luokka = "rectbackground" leveys = "147.4107"
korkeus = "68.7917" x = "31.2946" y = "114.1042"
rx = "4.5882" ry = "3.9565" Täytä = "# 2a7fff" / & gt;
& lt; polkuluokka = "rectext" d = "..." vektori-vaikutus = "ei-scaling-shath" aivohalvaus leveys = ". 470476156" Font-size = "12" Fill = "# FFF"
Täytä sääntö = "Enodd" aivohalvaus = "# FFF" aivohalvaus-linecap = "pyöreä" / & gt;
& lt; / g & gt;
& lt; / svg & gt;

07. Alkuvaltiot

SVG-elementtien valitseminen CSS: ssä on sama kuin mikään muu elementti. Käytämme luokkaitamme valitsemaan nämä elementit SVG: ssä. SVG: n molemmat osat alkavat piilotettuna, kun sivulataa, joten käytämme CSS: tä asettamaan molempien elementin läpinäkyvyyden 0 . 

 PATH.RECTTEXT {
Opasiteetti: 0;
}
rect.rectbackground {
Opasiteetti: 0;
}

08. julistaa animaatiot

Meidän on ilmoitettava kunkin animaation nimi ja avainhenkilöt, jotta CSS tietää, mitä haluamme tehdä, kun pyydämme sitä tehostamaan vaikutusta. Olen valinnut TextDraw ja peräsuolta , kun he kuvaavat jokaisen animaation. peräsuolta on yksinkertainen kaksivaiheinen animaatio. TextDraw on ylimääräinen keskivaihe. 

 @KEYframes TextDraw {
0% {}
50% {}
100% {}
}
@KeyFrompes perctrade {
{}
{}
}

09. Määritä animaatio ja ominaisuudet

SVG and coding

Klikkaa kuvaketta oikeassa yläkulmassa Suurenna kuvaa [Kuva: Joseph Ford]

Lisäämme peräsuolta animaatio rectbackground elementti ja anna se kesto yhdestä sekunnista. Annettu helppous Cubic bezier käytetään antamaan sille pehmeämpi tuntuu. Me lisäämme eteenpäin Joten elementti pitää viimeisen avainkehysryhmän ominaisuudet, kun animaatio päättyy. 

 rect.rectbackground {
Opasiteetti: 0;
Animaatio: rectfade 1S Cubic-Bezier (0,645,
0,045, 0,355, 1) eteenpäin;
}

10. Suorakulmion animaatio

SVG image

Klikkaa kuvaketta oikeassa yläkulmassa Suurenna kuvaa [Kuva: Joseph Ford]

Vain kaksi näppäinehtävää, kaikki meidän on tehtävä suorakulmioon, asetetaan aloitus ja viimeistely attribuuttien sarja. Aloitetaan a 1% leveys ja lopeta 100% antaa "oikean vaikutuksen laajentaminen". Voimme myös asettaa opasiteetti: 1 Viimeiseen avainkehys, joten muoto häviää samanaikaisesti. 

 @keyframes rectfade {
{
Leveys: 1%;
}
{
Leveys: 100%;
Opasiteetti: 1;
}
}

11. Tekstin animaatio

Aiomme luoda linja-vedonvaikutuksen tekstimme ja käytä täyttöä haalistumaan. Tekstin animaation määrittäminen me annamme sen TextDraw neljä sekunnin kesto. Cubic bezier on modifioitu tässä vaiheessa, jotta se on hieman erilainen liikkeen vauhde. 

 PATH.RECTTEXT {
Opasiteetti: 0;
Animaatio: TextDAW 4S
Cubic-bezier (.56, -0.04, .32, .7) eteenpäin;
}

12. Viive Aloitus

Tekstemme on tarkoitus ajaa aivan kuten suorakulmio on lopettanut häipymisen. Koska suorakulmiossa on yksi toinen kesto, viivästää tekstin animaation alkua tuolloin. 

 PATH.RECTTEXT {
Opasiteetti: 0;
Animaatio: TextDAW 4S
Cubic-bezier (.56, -0.04, .32, .7) eteenpäin;
Animaatio-viive: 1S;
}

13. Emuloi linjapiirustus

SVG animation

Klikkaa kuvaketta oikeassa yläkulmassa Suurenna kuvaa [Kuva: Joseph Ford]

Voit saada linjan piirustusvaikutuksen aivohalvaus ja aivohalvaus-daskOffset parametrit. Arvot ovat erilaiset kaivoksen mukaan käyttämäsi SVG: n mukaan. Voit etsiä arvoasi haluamasi kehittäjätyökalujen avulla ja kasvaa aivohalvaus peräkkäin 0 kunnes koko muoto on peitetty yhdellä aivohalvauksella. 

 PATH.RECTTEXT {
Opasiteetti: 0;
Aivohalvaus-DasharaRAY: 735;
Animaatio: TextDAW 4S
Cubic-bezier (.56, -0.04, .32, .7) eteenpäin;
Animaatio-viive: 1S;
}

14. Ensimmäinen rivin piirustus avainkehys

Nyt meillä on yksi erittäin suuri aivohalvaus, joka kattaa koko tekstikentän, siirrytään sen omalla pituudaan tehokkaasti työntääkseen sen pois. Käyttämällä aivohalvaus-daskOffset sama arvo kuin meidän dangarray pitäisi tehdä se. Aseta tämä ensimmäinen avainkehys. Teemme myös muodon täyttö läpinäkyväksi ja asetamme aivohalvauksen valkoiseksi, jos se ei ole jo. 

 0% {
Täytä: RGB (255, 255, 255, 0);
Aivohalvaus: #fff;
Aivohalvaus-DaskOffset: 800;
Opasiteetti: 1;
}

15. Piirrä rivit

Meidän keskimmäisen avainkehys tulee näkyviin 40% animaation kautta. Tuomme aivohalvaus-daskOffset Takaisin nollaan, joten viiva peittää koko polun. Voimme lisätä läpinäkyvän täytteen uudelleen tässä vaiheessa varmistaaksesi, että täyttö näkyy vain, kun piirustus on valmis. 

 40% {
aivohalvaus-daskOffset: 0;
Täytä: RGB (255, 255, 255, 0.0);
}

16. Täytä muoto

Animaation viimeisen osan osalta täytämme muodon valkoisena. Kaikki mitä meidän on tehtävä viimeisen avainkehys, nostaa täyttövärin alfa-arvoa. Tämä luo täytön haalistumisen. 

 100% {
Täytä: RGB (255, 255, 255, 1);
aivohalvaus-daskOffset: 0;
Opasiteetti: 1;
}

generate conference

Tämä artikkeli julkaistiin alun perin Creative Web Design Magazine Nettisivujen suunnittelija . Osta numero 286 tai tilata .

Lue lisää:

  • Lisää SVG-suodattimet CSS: llä
  • Miten suunnitella CSS-muotoja: Johdanto
  • MITEN SMART TEXT EFFECTS CSS: n kanssa

Miten tehdään - Suosituimmat artikkelit

Adobe Fresco Tutorial: Luo muotokuva maalaussovelluksessa

Miten tehdään Sep 13, 2025

(Kuva luotto: Phil Galloway) Tämän Adobe Fresco -opetuksen luodaan elinvoimainen ja emotionaalinen muotokuva, joka ..

Aloita GRAV-CMS: llä

Miten tehdään Sep 13, 2025

(Kuva luotto: tulevaisuus) Hauta on sisällönhallintajärjestelmä (CMS), jolla on ero. Sisältöhallintajärjestelm..

Luo hiiren ohjattu parallax taustavaikutus

Miten tehdään Sep 13, 2025

(Kuva luotto: Renaud Rohlinger) Parallax-selauspaikat ovat edelleen suosittuja syystä: he luovat miellyttävän ja h..

Aloita ruosteella

Miten tehdään Sep 13, 2025

Sivu 1/2: Sivu 1 Sivu 1 Sivu 2 ..

4 vinkkejä kehittäjien taitojen kehittämiseen

Miten tehdään Sep 13, 2025

(Kuva luotto: Robert Pizzo) Superystävällinen johtaja Dan Mall Jakamaan Pro Vinkkiensa siitä, mit..

Aloita WebGL: llä käyttämällä kolmea.js

Miten tehdään Sep 13, 2025

WebGL , jota tuetaan laajalti kaikissa nykyaikaisissa selaimissa, voit työskennellä laitteiston nopeutetun 3D-grafi..

Kuinka veistää vakauttavat silmät Zbrushissa

Miten tehdään Sep 13, 2025

Kun veistetään realistisen 3D-ihmisen lisääminen valmiiksi käyttövalmiiden varojen kirjastoon, muista, että kaksi silmää..

Kuinka tehdä WordPressin verkkosivustosi monikielinen

Miten tehdään Sep 13, 2025

Top 10 kielellä, jota käytetään internetissä, englanti Ensimmäinen , lähes 950 miljoonaa käyttäjää. Tä..

Luokat