Sådan tilføjes animation til SVG med CSS

Sep 15, 2025
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

22 bedste UI designværktøjer

hvordan Sep 15, 2025

(Billedkredit: Invision) Et udvalg af de bedste UI designværktøjer vil hjælpe med næsten hver designproces og ska..

Sådan Storyboard i Photoshop

hvordan Sep 15, 2025

(Billedkredit: Mark Evan Lim) Storyboarding i Photoshop kan være en fantastisk måde at få dine ideer kortlagt ud. ..

Opret perspektiv i Adobe Illustrator

hvordan Sep 15, 2025

Side 1 af 2: Brug af perspektivgitter i Illustrator: trin 01-09 Brug af p..

Hvad er en terminatorlinie?

hvordan Sep 15, 2025

Der er mange aspekter af belysning, som du skal overveje for at formidle form. En meget nyttig grundlæggende er terminatorlinjen..

Kom i gang med diffus

hvordan Sep 15, 2025

En af de enkleste måder at bringe lidt ekstra liv til ethvert stykke af 3D Art. er at tilføje farve og tekstur til den. Der er en række navne, der gives til denne proces, ti..

4 Tips til at forbedre din side ydelsen

hvordan Sep 15, 2025

Web Performance Analyst. Henri Helvetica. vil dele sine pro tips om, hvordan du øger dit..

Sådan optager du lyset med olier

hvordan Sep 15, 2025

Lys er noget, der altid inspirerer malere - hvad enten det er solen skinner på stenene i en bygning eller en blomst i en vase, d..

Master negativt maleri i akvarel

hvordan Sep 15, 2025

Negativt maleri refererer til at male negativt rum. der definerer positive former. Dette er især vigtigt med traditionel akvarel, hvor maling ting som lys-mod-mørk betyder, a..

Kategorier