Cum se adaugă animație la SVG cu CSS

Jan 30, 2026
să
Image: Web Designer
[Imagine: Web Designer]

Când vine vorba de animarea cu SVG-urile, o oprire majoră poate fi ideea de a fi încurcat în bibliotecile JavaScript. Cu toate acestea, acest lucru nu trebuie să fie cazul. CSS poate manipula selectarea căilor individuale într-un SVG pentru a crea efecte. Doar știind că elementele de bază pot însemna că este posibil să se transforme icoanele plate, să clipească în ceva mai impresionant. Deci, poate că este timpul să treceți prin pașii fundamentali ai optimizării și animației SVG. Când este integrat în diferite modele, nu durează mult să-și dea seama că posibilitățile sunt nesfârșite.

Pentru mai multă inspirație de mișcare, aruncați o privire la ghidul Creative Bloq Exemple de animație CSS. și cum să le codificați.

Salvați 100 de lire sterline cu un bilet de primă pasăre Generați CSS. , Conferința Web de o zi găzduită de Creative Bloom, revista designerului web și revista netă. Rezervați aici .

01. Creați și salvați

În primul rând, creați un SVG pentru a lucra cu. Pentru acest tutorial, vom folosi un grafic simplu realizat în Illustrator. Când utilizați Illustrator pentru a exporta un SVG, reduceți dimensiunea tablă de artă pentru a se potrivi graficului, apoi faceți clic pe "Salvați ca". Selectați SVG din meniul derulant "Salvați ca tip", apoi "Cod SVG ..." pe dialogul Opțiuni SVG.

02. Optimizați pentru web

SVG screenshot

Faceți clic pe pictograma din dreapta sus pentru a mări imaginea [Imagine: SVGOMG]

Tăierea etichetelor inutile va face imaginea mai ușoară de a face față. Acest lucru se poate face manual prin copierea codului la editorul dvs. preferat și eliminând etichetele goale și metadatele. Alternativ, o resursă fantastică numită Svgomg. va face acest lucru automat. Inserați codul în zona "Lipire Markup" din interfața SVGOMG, apoi copiați imaginea din nou utilizând butonul din dreapta jos.

03. Configurați un document HTML

Deschideți editorul de coduri de alegere și configurați un document HTML gol. Vom scrie animația CSS într-un fișier numit Main.css. , deci creați acest lucru. Pentru a păstra lucrurile concentrate asupra animației, am tras în versiunea numai CSS a bootstrap 4.1.3.

04. Construiți aspectul

Să construim oasele aspectului nostru și să facem un spațiu pentru SVG-ul nostru. Am adăugat un antet și două coloane: unul din stânga pentru un text și unul din dreapta, care va ține SVG-ul pe care îl vom anima. Pentru a trăi pagina în sus, utilizați o secundă, statică, svg ca fundal pe eticheta corpului.

05. Așezați svg-ul

Folosim animația noastră pentru a face introducerea în partea de sus a paginii mai interesante. Inserați codul optimizat SVG în a doua coloană de pe pagină. Dacă utilizați bootstrap, dați SVG clasa IMG-fluid Pentru a vă asigura că cântare pe telefoane mobile.

06. Adăugați clase la SVG

Adăugarea claselor la SVG permite CSS să selecteze formele individuale din imagine. Aceasta înseamnă că puteți anima diferite forme ale imaginii în momente diferite, creând un efect mai complex. 

 și lt; svg & gt;
& gt;
& lt; majorat Class = "RectBackground" Width = "147.4107"
Înălțime = "68.7917" X = "31.2946" Y = "114.1042"
Rx = "4.5882" Ry = "3.9565" Fill = "# 2A7FFF" / & GT;
& lt; CLASS CLASS = "RECTTEXT" D = "..." Vector-efect = "Cursa non-scalare" cursa-lățime = ". 470476156" Font-size = "12" Fill = "# FFF"
Fill-regula = "Evenodd" Stroke = "# FFF" Stroke-LineCap = "Runda" / & GT;
& lt; / gt;
& lt; / svg & gt;

07. Statele inițiale

Selectarea elementelor noastre SVG în CSS este aceeași ca orice alt element. Folosim clasele noastre pentru a selecta acele elemente din SVG. Ambele părți ale SVG noastre vor începe ca fiind ascunse atunci când se încarcă pagina, deci să folosim CSS pentru a seta opacitatea elementului 0. . 

 PATH.ReTText {
Opacitate: 0;
}
rect.rectbackground {
Opacitate: 0;
}

08. Declarați animațiile

Trebuie să declarăm numele și cadrele cheie pentru fiecare animație, astfel încât CSS să știe ce vrem să facem când o cerem să îndeplinească un efect. am ales textdraw. și recttea , pe măsură ce descriu fiecare animație. recttea va fi o animație simplă în două trepte. textdraw. va avea un pas de mijloc suplimentar. 

 @keyframes textdraw {
0% {}
50% {}
100% {}
}
@keyframes recttea {
din{}
la{}
}

09. Atribuiți animație și proprietăți

SVG and coding

Faceți clic pe pictograma din dreapta sus pentru a mări imaginea [Imagine: Joseph Ford]

Adăugăm recttea Animație la. Rect Instance element și dați-i o durată de o secundă. Un Evaluare Bezierul cubic este folosit pentru a oferi o senzație mai ușoară. Adaugam înainte Deci, elementul păstrează proprietățile ultimului cadru cheie când se termină animația. 

 RECT.IcTground {
Opacitate: 0;
Animație: RectWade 1s Cubic-Bezier (0.645,
0,045, 0,355, 1) înainte;
}

10. Animația dreptunghiului

SVG image

Faceți clic pe pictograma din dreapta sus pentru a mări imaginea [Imagine: Joseph Ford]

Cu doar două cadre cheie, tot ce trebuie să facem pentru dreptunghiul nostru este setat un set de atribute de pornire și de finisare. Să începem cu a 1% lățime și terminați 100% pentru a da o "extindere la efectul potrivit". De asemenea, putem seta Opacitate: 1. la ultimul cadru cheie, astfel încât forma se estompează în același timp. 

 @ Brayframes RectFade {
de la {
Lățime: 1%;
}
la {
Lățime: 100%;
Opacitate: 1;
}
}

11. Animația textului

Vom crea un efect de tragere a liniei asupra textului nostru, apoi folosim o umplere pentru a dispărea. Pentru a configura animația de text pe care o oferim textdraw. cu o durată de patru secunde. Bezierul cubic a fost modificat în acest pas pentru a da un ritm ușor diferit de mișcare. 

 PATH.ReTText {
Opacitate: 0;
Animație: TextDraw 4s
cubic-bezier (.56, -04, .32 ,.7) înainte;
}

12. Întârzieți începutul

Textul nostru trebuie să ruleze așa cum dreptunghiul a terminat decolorarea. Deoarece dreptunghiul are o durată de o secundă, întârzie începerea animației text până la acel moment. 

 PATH.ReTText {
Opacitate: 0;
Animație: TextDraw 4s
cubic-bezier (.56, -04, .32 ,.7) înainte;
Animație-întârziere: 1s;
}

13. Emulați desenul de linie

SVG animation

Faceți clic pe pictograma din dreapta sus pentru a mări imaginea [Imagine: Joseph Ford]

Pentru a obține efectul de desen al liniei, vom folosi accident vascular cerebral-dasharray. și accident vascular cerebral-bordoffset parametri. Valorile dvs. vor fi diferite de a mea, în funcție de SVG pe care îl utilizați. Pentru a vă găsi valoarea, utilizați instrumentele dvs. de dezvoltator preferat și creșteți accident vascular cerebral-dasharray. din 0. până când întreaga formă este acoperită de un accident vascular cerebral. 

 PATH.ReTText {
Opacitate: 0;
accident vascular cerebral-dasharray: 735;
Animație: TextDraw 4s
cubic-bezier (.56, -04, .32 ,.7) înainte;
Animație-întârziere: 1s;
}

14. First Line Desen Keyframe

Acum avem un accident vascular cerebral foarte mare care acoperă întreaga cale de text, să o compensăm prin propria sa lungime pentru a împinge în mod eficient. Folosind. accident vascular cerebral-bordoffset pentru aceeași valoare ca și noi Dasharray. ar trebui să o facă. Să punem asta în primul nostru cadru cheie. De asemenea, vom face ca forma să umple transparentă și vom seta cursa la alb dacă nu este deja. 

 0% {
Umpleți: RGB (255, 255, 255, 0);
accident vascular cerebral: #ffff;
accident vascular cerebral-bordoffset: 800;
Opacitate: 1;
}

15. Desenați liniile

Odframe-ul nostru de mijloc apare la 40% prin animație. Aducem accident vascular cerebral-bordoffset Înapoi la zero, astfel încât bordul acoperă întreaga cale. Putem re-adăuga completarea transparentă în această etapă pentru a vă asigura că umplerea apare numai după finalizarea desenului. 

 40% {
accident vascular cerebral-bordoffset: 0;
Umpleți: RGB (255, 255, 255, 0,0);
}

16. Completați forma

Pentru ultima parte a animației, vom umple forma în alb. Tot ce trebuie să facem pentru ultimul cadru cheie este ridicarea valorii alfa a culorii de umplere. Acest lucru creează efectul de decolorare a umplerii. 

 100% {
Umpleți: RGB (255, 255, 255, 1);
accident vascular cerebral-bordoffset: 0;
Opacitate: 1;
}

generate conference

Acest articol a fost publicat inițial în revista Creative Web Design Web designer . Cumpăra problema 286. sau Abonati-va .

Citeste mai mult:

  • Adăugați filtre SVG cu CSS
  • Cum se proiectează cu forme CSS: o introducere
  • Cum se codifică efectele text inteligente cu CSS

să - Cele mai populare articole

Construiți un chat-chat alimentat cu AI

să Jan 30, 2026

Inteligența artificială (AI) ne permite să creăm noi modalități de a privi problemele existente, de la regândirea strategi..

Cum să atragă un elefant

să Jan 30, 2026

Ca cel mai mare mamifer de teren viu pe Pământ, elefanții au prezența incontestabilă. La naștere, elefanții cântăresc deja până la 200 de kilogr..

8 secrete esențiale de securitate WordPress

să Jan 30, 2026

În ultimii 15 ani WordPress a devenit cel mai popular sistem de management al conținutului din lume. Ușor de început cu și extrem de versatil, este unul dintre Cele mai bune plat..

12 sfaturi pentru iluminarea 3D realistă

să Jan 30, 2026

Iluminarea este fundamentală în oricare 3D Art. proiectul pe care lucrați. La cel mai de bază, este o modalita..

Cum se creează o cârpă reală CG

să Jan 30, 2026

Când lucrați cu pânză și țesături în 3D, poate fi greu să se obțină atât o rezoluție bună, cât și o privire minun..

5 moduri de a crea mai multe experiențe mai imersive VR

să Jan 30, 2026

Realitatea virtuală nu este exact nouă, dar a fost doar în ultimii ani că tehnologia a atins un punct în care poate începe ..

Construiți o interfață personalizată Maya

să Jan 30, 2026

Software-ul modern poate fi extrem de puternic și total cuprinzător. Maya nu este diferită, oferind o matrice uimitoare la instrumente, comenzi și opțiuni pentru a vă ajuta să atingeț..

Cum se face o platformă flexibilă

să Jan 30, 2026

Rigurile de panglică sunt destul de comune în 3D Art. Producția de producție în aceste zile. Ei au un comport..

Categorii