Sådan tilføjes animation til SVG med CSS

Feb 2, 2026
hvordan
Image: Web Designer
[Billede: Web Designer]

Når det kommer til at animere med SVGS, kan en stor slukning være ideen om at blive skruet ned i JavaScript-biblioteker. Dette behøver dog ikke være tilfældet. CSS kan håndtere udvælgelse af individuelle stier i en SVG for at skabe effekter. Bare at vide det grundlæggende kan betyde, at det er muligt at blive fladt, klichede ikoner til noget lidt mere imponerende. Så måske er det tid til at løbe gennem de grundlæggende trin af SVG-optimering og animation. Når det integreres i forskellige designs, tager det ikke lang tid at indse, at mulighederne er uendelige.

For mere bevægelsesinspiration, tag et kig på Creative Bloq's Guide til CSS animation eksempler og hvordan man kan kode dem.

Spar £ 100 med en Super Early Bird Ticket til Generere CSS. , den en-dags webkonference, der er vært for Creative Bloq, Web Designer Magazine og Net Magazine. Bestil her .

01. Opret og gem

For det første skab en SVG til at arbejde med. For denne vejledning vil vi bruge en simpel grafik lavet på Illustrator. Når du bruger Illustrator til at eksportere en SVG, reducer kunstkortets størrelse, så du passer til grafikken, og klik derefter på 'Gem som'. Vælg SVG fra rullemenuen 'Gem som type', og derefter 'SVG-kode ...' på SVG-indstillingsdialogen.

02. Optimer til internettet

SVG screenshot

Klik på ikonet øverst til højre for at forstørre billedet [Billede: SVGOMG]

At skære ud unødvendige tags vil gøre billedet lettere at håndtere. Dette kan gøres manuelt ved at kopiere koden til din yndlingseditor og fjerne tomme tags og metadata. Alternativt kan en fantastisk ressource kaldet SVGOMG. vil gøre dette automatisk. Indsæt koden i området 'Paste Markup' på SVGOMG-grænsefladen, og kopier derefter billedet igen ved hjælp af knappen nederst til højre.

03. Opsæt et HTML-dokument

Åbn din kode editor for valg og opret et blankt HTML-dokument. Vi vil skrive CSS-animationen i en fil, der hedder Main.css. , så skab også dette. For at holde tingene fokuseret på animationen, har vi trukket i CSS-only-versionen af ​​Bootstrap 4.1.3.

04. Byg layoutet

Lad os bygge knoglerne i vores layout og gøre et mellemrum til vores SVG. Vi har tilføjet en header og to kolonner: en til venstre for en tekst, og en til højre, som vil holde SVG, at vi vil animere. For at opleve siden op, brug et sekund, statisk, SVG som baggrund på kroppen.

05. Placer SVG

Vi bruger vores animation til at gøre introduktionen øverst på siden er mere interessant. Indsæt den optimerede SVG-kode i den anden kolonne på siden. Hvis du bruger bootstrap, giv SVG klassen img-væske for at sikre, at det skalaer på mobiler.

06. Tilføj klasser til SVG

Tilføjelse af klasser til SVG tillader CSS at vælge de enkelte former inden for billedet. Det betyder, at du kan animere forskellige former for billedet på forskellige tidspunkter, hvilket skaber en mere kompleks virkning. 

 & lt; svg & gt;
& lt; g & gt;
& lt; rekt klasse = "rektbackground" bredde = "147.4107"
Højde = "68.7917" x = "31.2946" Y = "114.1042"
rx = "4.5882" ry = "3.9565" fill = "# 2a7fff" / & gt;
& lt; path class = "recttext" d = "..." vektor-effekt = "ikke-skalering-slagtilfælde" stroke-width = ". 470476156" Font-size = "12" Fill = "# FFF"
fyldningsregel = "EvenoDD" Stroke = "# FFF" slagtilfælde lineecap = "runde" / & gt;
& lt; / g & gt;
& lt; / svg & gt;

07. Indledende stater

Valg af vores SVG-elementer i CSS er det samme som et andet element. Vi bruger vores klasser til at vælge de elementer i SVG. Begge dele af vores SVG starter som skjult, når siden indlæser, så lad os bruge CSS til at indstille begge elementets opacitet til 0. . 

 PATH.RectText {
Opacitet: 0;
}
Rect.Rectbackground {
Opacitet: 0;
}

08. Erklære animationerne

Vi skal erklære navnet og keyframes for hver animation, så CSS ved, hvad vi vil gøre, når vi beder det om at udføre en effekt. Jeg har valgt TEXTDRAW. og retfade , da de beskriver hver animation. retfade vil være en simpel to-trins animation. TEXTDRAW. vil have et ekstra mellemtrin. 

 @Keyframes tekstdraw {
0% {}
50% {}
100% {}
}
@Keyframes rektfade {
fra{}
til{}
}

09. Tildel animation og egenskaber

SVG and coding

Klik på ikonet øverst til højre for at forstørre billedet [Billede: Joseph Ford]

Vi tilføjer retfade animation til Rektbackground element og give det en varighed på et sekund. AN. næppe Cubic Bezier bruges til at give det en glattere følelse. Vi tilføjer Forwards. Så elementet holder egenskaberne af den sidste keyframe, når animationen slutter. 

 Rect.RectBackground {
Opacitet: 0;
Animation: Rightfade 1S Cubic-Bezier (0.645,
0,045, 0,355, 1) fremad;
}

10. Rektangel animation

SVG image

Klik på ikonet øverst til højre for at forstørre billedet [Billede: Joseph Ford]

Med kun to keyframes, er alt, hvad vi skal gøre for vores rektangel, indstillet en start- og finish sæt attributter. Lad os starte med en 1% Bredde og afslut 100% at give en "udvidelse til den rigtige virkning". Vi kan også sætte Opacitet: 1 til den sidste keyframe, så formen falder ind på samme tid. 

 @Keyframes rektfade {
fra {
Bredde: 1%;
}
til {
Bredde: 100%;
Opacitet: 1;
}
}

11. Tekst animationen

Vi skal oprette en linjevirkning på vores tekst, og brug derefter en udfyldning til at fade i. For at oprette teksten animation giver vi det vores TEXTDRAW. med en fire sekunders varighed. Den kubiske bezier er blevet ændret på dette trin for at give det et lidt anderledes tempo. 

 PATH.RectText {
Opacitet: 0;
Animation: TextDraw 4S
Cubic-Bezier (.56, -0,04, .32, .7) fremad;
}

12. Forsink starten

Vores tekst skal køre, ligesom rektanglet er færdig med at fade i. Fordi rektanglet har en en anden varighed, forsinkes starten af ​​tekst animationen på det tidspunkt. 

 PATH.RectText {
Opacitet: 0;
Animation: TextDraw 4S
Cubic-Bezier (.56, -0,04, .32, .7) fremad;
Animationsforsinkelse: 1s;
}

13. Emulate Line Tegning

SVG animation

Klik på ikonet øverst til højre for at forstørre billedet [Billede: Joseph Ford]

For at få vores line tegningseffekt vil vi bruge Stroke-Dasharray. og Stroke-Dashoffset. parametre. Dine værdier vil være forskellige for mine afhængigt af den SVG, du bruger. For at finde din værdi, brug dine foretrukne udviklerværktøjer og øges Stroke-Dasharray. fra 0. indtil hele form er dækket af et slagtilfælde. 

 PATH.RectText {
Opacitet: 0;
Stroke-Dasharray: 735;
Animation: TextDraw 4S
Cubic-Bezier (.56, -0,04, .32, .7) fremad;
Animationsforsinkelse: 1S;
}

14. Første linje tegning Keyframe

Nu har vi vores ene meget store slagtilfælde, der dækker hele tekstbanen, lad os kompensere det af sin egen længde for effektivt at skubbe den væk. Ved brug af Stroke-Dashoffset. Til samme værdi som vores dasharray. bør gøre det. Lad os sætte dette i vores første keyframe. Vi vil også gøre formen fylde gennemsigtig og sætte slagtilfælde til hvid, hvis det ikke allerede er. 

 0% {
Udfyld: RGB (255, 255, 255, 0);
Stroke: #fff;
Stroke-DashOffset: 800;
Opacitet: 1;
}

15. Tegn linjerne

Vores midterste keyframe vises på 40% gennem animationen. Vi bringer Stroke-Dashoffset. Tilbage til nul så dash dækker hele stien. Vi kan genindsætte den gennemsigtige udfyldning på dette stadium for at sikre, at fylden kun vises, når tegningen er færdig. 

 40% {
Stroke-Dashoffset: 0;
Fyld: RGB (255, 255, 255, 0,0);
}

16. Udfyld formen

For den sidste del af animationen vil vi fylde formen i hvid. Alt, hvad vi skal gøre for den sidste keyframe, er at hæve alfa-værdien af ​​fyldfarven. Dette skaber fade-i effekten af ​​fill. 

 100% {
Fyld: RGB (255, 255, 255, 1);
Stroke-Dashoffset: 0;
Opacitet: 1;
}

generate conference

Denne artikel blev oprindeligt offentliggjort i Creative Web Design Magazine Webdesigner . Køb udgave 286. eller abonnere .

Læs mere:

  • Tilføj SVG filtre med CSS
  • Sådan designes med CSS-figurer: En introduktion
  • Sådan kaster du Smart Text Effects med CSS

hvordan - Mest populære artikler

Facebook Privacy Settings: Sådan holder du din profil privat

hvordan Feb 2, 2026

(Billedkredit: Alex Blake / Facebook) Facebook Privacy Settings kan virke som en smule af et paradoks. Facebook er ik..

Sådan oprettes likvekvenser med Webgl

hvordan Feb 2, 2026

Mange webdesignere ser efter måder at føje en stor indflydelse på deres webstedsdesign, så de får fat i deres brugere. Metod..

Sådan maler du en farverig zombie

hvordan Feb 2, 2026

Jeg har altid ønsket det udøde, og vil ofte rod for den ragged underdog, der så ofte reduceres til et bevægeligt mål. Mange ..

Sådan opretter du stiliseret spil kunst

hvordan Feb 2, 2026

Kunstens stil af førstepersons overlevelse videospil Lang mørk kan være bedragerisk vanskeligt at fange. Stilen..

Generer endeløse farvepaletter med Khroma

hvordan Feb 2, 2026

Fremragende brug af farve teori. I design er en af ​​de ting, der adskiller det store fra gennemsnittet. Mens ..

Sådan laver de massive eksplosioner med V-RAY

hvordan Feb 2, 2026

Oprettelse og sammensætning af 3D-eksplosioner er normalt en opgave for to forskellige kunstnere eller studiejendomme, men her s..

Alder et fotografi i Photoshop CC

hvordan Feb 2, 2026

Aging Et fotografi i Photoshop er en klassisk teknik, der kan gøre selv et Ho-hum, fuldfarvet billede i noget slående. Hvis dit..

Lav et logo på Illustrator

hvordan Feb 2, 2026

I denne uge så udgivelsen af ​​nogle nye videoer på Adobe's gøre det nu afspilningsliste, en samling af klip om, hvordan man opretter designprojekter med Creative Cloud-applikationer o..

Kategorier