Hvordan legge til animasjon til SVG med CSS

Sep 15, 2025
hvordan
Image: Web Designer
[1. 3]
[Bilde: Web Designer]

Når det gjelder animere med SVGs, kan en stor avstenging være ideen om å bli slått ned i JavaScript-biblioteker. Dette trenger imidlertid ikke å være tilfelle. CSS kan håndtere å velge individuelle baner i en SVG for å skape effekter. Bare å vite det grunnleggende kan bety at det er mulig å slå flatt, klichet ikoner til noe litt mer imponerende. Så kanskje det er på tide å løpe gjennom de grunnleggende trinnene i SVG optimalisering og animasjon. Når det er integrert i forskjellige design, tar det ikke lang tid å innse at mulighetene er uendelige.

For mer bevegelsesinspirasjon, ta en titt på Creative Bloqs guide til CSS animasjonseksempler og hvordan å kode dem.

Spar £ 100 med en super tidlig fuglbillett til Generere CSS , den ene dagers webkonferansen vert av Creative Bloq, Web Designer Magazine og Net Magazine. Bestill her .

01. Lag og lagre

Først, opprett en SVG å jobbe med. For denne opplæringen skal vi bruke en enkel grafikk som er gjort i Illustrator. Når du bruker Illustrator for å eksportere en SVG, reduser størrelsen på tavlen for å passe grafikken, og klikk deretter på "Lagre som". Velg SVG fra rullegardinmenyen Lagre som type, og deretter 'SVG-koden ...' på SVG-alternativer-dialogen.

02. Optimaliser for nettet

SVG screenshot

Klikk på ikonet øverst til høyre for å forstørre bildet [bilde: svgomg]

Kutting av unødvendige koder vil gjøre bildet lettere å håndtere. Dette kan gjøres manuelt ved å kopiere koden til favorittredigeren din og fjerne tomme koder og metadata. Alternativt kalles en fantastisk ressurs Svgomg. vil gjøre dette automatisk. Lim inn koden i "Pasta Markup" -området på SVGOMG-grensesnittet, og kopier deretter bildet igjen ved hjelp av knappen nederst til høyre.

03. Sett opp et HTML-dokument

Åpne kodeditoren din for valg og sett opp et tomt HTML-dokument. Vi vil skrive CSS-animasjonen i en fil som heter Main.css , så skape dette også. For å holde ting fokusert på animasjonen, har vi trukket inn CSS-bare versjonen av Bootstrap 4.1.3.

04. Bygg oppsettet

La oss bygge beinene i vår layout og ta en plass til vår SVG. Vi har lagt til en header og to kolonner: en til venstre for litt tekst, og en til høyre, som vil holde SVG som vi skal animere. For å leve siden opp, bruk et sekund, statisk, svg som bakgrunn på kroppsmerket.

05. Plasser SVG

Vi bruker vår animasjon for å gjøre introduksjonen på toppen av siden mer interessant. Lim inn den optimaliserte SVG-koden i den andre kolonnen på siden. Hvis du bruker Bootstrap, gi SVG klassen img-væske for å sikre at det skaleres på mobiler.

06. Legg til klasser til SVG

Legge til klasser i SVG gjør det mulig for CSS å velge de enkelte figurene i bildet. Dette betyr at du kan animere forskjellige former på bildet på forskjellige tidspunkter, og skape en mer kompleks effekt. 

 & lt; svg & gt;
& lt; g & gt;
& lt; rect class = "reightbackground" width = "147.4107"
Høyde = "68.7917" x = "31.2946" Y = "114.1042"
rx = "4.5882" ry = "3.9565" fill = "# 2A7FFF" / & gt;
& lt; Path Class = "RectText" D = "..." Vector-effekt = "Ikke-skalering-stroke" Stroke-Width = ". 470476156" Font-size = "12" fill = "# fff"
Fyll-regel = "Evenodd" Stroke = "# FFF" Stroke-Linecap = "Round" / & GT;
& lt; / g & gt;
& lt; / svg & gt;

07. Innledende stater

Å velge våre SVG-elementer i CSS er det samme som et annet element. Vi bruker våre klasser til å velge disse elementene i SVG. Begge deler av vår SVG vil starte som skjult når siden laster, så la oss bruke CSS for å sette begge elementets opasitet til 0. . 

 PATH.RectText {
opasitet: 0;
}
rect.rectbackground {
opasitet: 0;
}

08. Erklære animasjonene

Vi må erklære navn og keyframes for hver animasjon, slik at CSS vet hva vi vil gjøre når vi ber om å utføre en effekt. Jeg har valgt Textdraw. og rektelefon , som de beskriver hver animasjon. rektelefon vil være en enkel to-trinns animasjon. Textdraw. vil ha et ekstra mellomstilt. 

 @keyframes TextDraw {
0% {}
50% {}
100% {}
}
@keyframes rectfade {
fra{}
til{}
}

09. Tilordne animasjon og egenskaper

SVG and coding

Klikk på ikonet øverst til høyre for å forstørre bildet [Bilde: Joseph Ford]

Vi legger til rektelefon animasjon til den rexbactground element og gi det en varighet på ett sekund. An. EASEOUT Cubic Bezier blir brukt til å gi den en jevnere følelse. Vi legger til fremover Så elementet holder egenskapene til den siste keyframe når animasjonen slutter. 

 Rett.rectbackground {
opasitet: 0;
Animasjon: Rectfade 1s Cubic-Bezier (0.645,
0,045, 0,355, 1) fremover;
}

10. Rektangel animasjonen

SVG image

Klikk på ikonet øverst til høyre for å forstørre bildet [Bilde: Joseph Ford]

Med bare to keyframes, er alt vi trenger å gjøre for vårt rektangel, en start og ferdig sett med attributter. La oss starte med en 1% bredde og avslutt på 100% å gi en "ekspanderende til den rette effekten". Vi kan også sette Opacity: 1. til den siste keyframe slik at formen fyller på samme tid. 

 @keyframes rectfade {
fra {
Bredde: 1%;
}
til {
Bredde: 100%;
opasitet: 1;
}
}

11. Tekst animasjonen

Vi skal lage en linje-tegningseffekt på teksten vår, og bruk deretter en fyll til å falme inn. For å sette opp tekstanimasjonen gir vi det vår Textdraw. med en fire andre varighet. Den kubiske Bezier har blitt modifisert på dette trinnet for å gi det et litt annet tempo i bevegelsen. 

 PATH.RectText {
opasitet: 0;
Animasjon: TextDraw 4s
cubic-bezier (56, -0,04, 0,32, 0,7) fremover;
}

12. Forsink starten

Vår tekst må kjøre akkurat som rektangelet er ferdig med å falme inn. Fordi rektangelet har en annen varighet, forsinker starten på tekstanimasjonen på den tiden. 

 PATH.RectText {
opasitet: 0;
Animasjon: TextDraw 4s
cubic-bezier (56, -0,04, 0,32, 0,7) fremover;
animasjon-forsinkelse: 1s;
}

13. Emulere linje tegning

SVG animation

Klikk på ikonet øverst til høyre for å forstørre bildet [Bilde: Joseph Ford]

For å få vår tegningseffekt, vil vi bruke Stroke-Dasharray og Stroke-Dashoffset parametere. Dine verdier vil være forskjellige for å min, avhengig av SVG du bruker. For å finne din verdi, bruk dine foretrukne utviklerverktøy og økning Stroke-Dasharray fra 0. til hele formen er dekket av ett slag. 

 PATH.RectText {
opasitet: 0;
Stroke-Dasharray: 735;
Animasjon: TextDraw 4s
cubic-bezier (56, -0,04, 0,32, 0,7) fremover;
animasjon-forsinkelse: 1s;
}

14. Første linje tegning Keyframe

Nå har vi vårt en veldig stor slag som dekker hele tekstbanen, la oss kompensere for sin egen lengde for å effektivt skyve den bort. Ved hjelp av Stroke-Dashoffset for samme verdi som vår Dasharray. bør gjøre det. La oss sette dette i vår første keyframe. Vi vil også lage formen fylle gjennomsiktig og sette slaget til hvitt hvis det ikke allerede er. 

 0% {
Fyll: RGB (255, 255, 255, 0);
Stroke: #FFF;
Stroke-Dashoffset: 800;
opasitet: 1;
}

15. Tegn linjene

Vår Middle Keyframe vises på 40% gjennom animasjonen. Vi bringer den Stroke-Dashoffset. Tilbake til null, slik at dashet dekker hele banen. Vi kan gjenta det gjennomsiktige fyllingen på dette stadiet for å sikre at fyllingen bare vises når tegningen er fullført. 

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

16. Fyll ut formen

For den siste delen av animasjonen fyller vi formen i hvitt. Alt vi trenger å gjøre for den siste keyframe, øker alfa-verdien av fyllfargen. Dette skaper fade-effekten av fyllingen. 

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

generate conference

Denne artikkelen ble opprinnelig publisert i Creative Web Design Magazine Webdesigner . Kjøp utgave 286. eller abonnere .

Les mer:

  • Legg til SVG-filtre med CSS
  • Hvordan designe med CSS-figurer: En introduksjon
  • Hvordan kode Smart Text Effects med CSS

hvordan - Mest populære artikler

Arbeid smart med din zbrush ui

hvordan Sep 15, 2025

Alt som stimulerer vårt sinn, kan påvirke vår produktivitet, og det er viktig å gjenkjenne faktorer som støtter vårt arbeid, enten det er riktig slags bakgrunnsmusikk eller til og med v..

Nivå opp din VR-kunst

hvordan Sep 15, 2025

[1. 3] Jeg begynte å bruke Cinema 4d noen få måneder etter å ha fått min VR-hodesett for et år siden. Inntil da hadde jeg br..

Scatter Trees med V-ray

hvordan Sep 15, 2025

[1. 3] Legge til detaljer til din scene er alltid veien å gå når du vil oppnå mer realisme i din 3D Art. , Og h..

Opprett sett med produktikoner i Illustrator

hvordan Sep 15, 2025

[1. 3] [1. 3] Klikk på ikonet øverst til høyre for å forstørre ikonene ..

5 ting du trenger for oljemaleri

hvordan Sep 15, 2025

[1. 3] Det er en uberettiget mystikk rundt oljemaleri som har satt noen kunstnere fra å utforske dem. Hvis du vet riktig ..

10 tips for hard overflate modellering

hvordan Sep 15, 2025

[1. 3] Dette bildet av Brunels store østlige dampskip fra 1858 er på permanent skjerm på et nytt £ 7 millioner museum i Bristo..

En introduksjon til frontend testing

hvordan Sep 15, 2025

[1. 3] Side 1 av 2: Ulike typer frontend tester (og når du skal bruke dem) ..

Lag fantastiske Tillable Textures i Blender

hvordan Sep 15, 2025

[1. 3] Side 1 av 2: Side 1 Side 1 Side 2 ..

Kategorier