Come aggiungere animazione a svg con css

Jan 25, 2026
Come si fa
Image: Web Designer
[Immagine: Web Designer]

Quando si tratta di animare con SVGS, un grande turn-off può essere l'idea di impantanarsi nelle librerie JavaScript. Tuttavia, questo non deve essere il caso. CSS può gestire la selezione di singoli percorsi all'interno di un SVG per creare effetti. Solo sapendo che le basi possono significare che è possibile girare piatte, icone cliché in qualcosa di un po 'più impressionante. Quindi forse è ora di attraversare i passi fondamentali dell'ottimizzazione e dell'animazione SVG. Quando integrati in diversi disegni, non ci vuole molto per rendersi conto che le possibilità sono infinite.

Per ulteriori ispirazione, dai un'occhiata alla Guida creativa Bloq a Esempi di animazione CSS. e come codice.

Risparmia £ 100 con un biglietto Super Early Bird per Genera CSS. , la conferenza web di un giorno ospitata da Creative Bloq, Web Designer Magazine e Net Magazine. Prenota qui .

01. Crea e salva

Innanzitutto, crea un svg con cui lavorare. Per questo tutorial, useremo un semplice grafico realizzato in Illustrator. Quando si utilizza illustratore per esportare un SVG ridurre la dimensione della tavola da disegno per adattarsi alla grafica, quindi fare clic su "Salva come". Selezionare SVG dal menu a discesa "Salva come tipo", quindi "codice svg ..." sulla dialogo delle opzioni SVG.

02. Ottimizza per il web

SVG screenshot

Fai clic sull'icona in alto a destra per ingrandire l'immagine [Immagine: Svgomg]

Tagliare i tag non necessari renderà l'immagine più facile da gestire. Questo può essere fatto manualmente copiando il codice nel tuo editor preferito e rimuovendo tag e metadati vuoti. In alternativa, una risorsa fantastica chiamata Svgomg. lo farò automaticamente. Incollare il codice nell'area "Incolla Markup" sull'interfaccia Svgomg, quindi copiare nuovamente l'immagine usando il pulsante in basso a destra.

03. Configurare un documento HTML

Apri il tuo editor di codice di scelta e configurare un documento HTML vuoto. Scriveremo l'animazione CSS in un file chiamato main.css. , quindi crea anche questo. Per mantenere le cose focalizzate sull'animazione, abbiamo tirato nella versione solo della CSS di Bootstrap 4.1.3.

04. Costruisci il layout

Costruiamo le ossa del nostro layout e fai uno spazio per il nostro svg. Abbiamo aggiunto un'intestazione e due colonne: una a sinistra per un certo testo, e una a destra, che terrà il SVG che ti animaremo. Per ravvivare la pagina, utilizzare un secondo, statico, svg come sfondo sul tag del corpo.

05. Metti il ​​SVG

Stiamo usando la nostra animazione per rendere l'introduzione in cima alla pagina più interessante. Incolla il codice SVG ottimizzato nella seconda colonna sulla pagina. Se si utilizza Bootstrap, dai la classe SVG della classe IMG-FLUID. per assicurarsi che scaletta sui cellulari.

06. Aggiungi classi a SVG

L'aggiunta di classi all'SVG consente a CSS di selezionare le singole forme all'interno dell'immagine. Ciò significa che puoi animare diverse forme dell'immagine in momenti diversi, creando un effetto più complesso. 

 & lt; svg & gt;
& lt; g & gt;
& lt; rect class = "reddbackground" width = "147.4107"
altezza = "68.7917" x = "31.2946" y = "114.1042"
rx = "4.5882" ry = "3.9565" riempimento = "# 2a7FFF" / & GT;
& lt; percorso class = "rettitto" d = "..." vector-effect = "warth-warth-width-width-warth =". 470476156 "Font-size =" 12 "riempimento =" # fff "
riempimento-regola = "sylyodd" ictus = "# fff" ictus-linecap = "round" / & gt;
& lt; / G & GT;
& lt; / svg & gt;

07. Stati iniziali

La selezione dei nostri elementi SVG in CSS è la stessa di qualsiasi altro elemento. Usiamo le nostre classi per selezionare quegli elementi all'interno dello SVG. Entrambe le parti del nostro SVG inizieranno come nascoste quando la pagina viene caricata, quindi usiamo CSS per impostare l'opacità di entrambi gli elementi 0. . 

 percorso.RectText {
Opacità: 0;
}
ret.rectbackground {
Opacità: 0;
}

08. Dichiarare le animazioni

Dobbiamo dichiarare il nome e i fotogrammi chiave per ogni animazione in modo che CSS sappia cosa vogliamo fare quando lo chiediamo di eseguire un effetto. ho scelto Dreato di testo e reddFade. , come descrivono ogni animazione. reddFade. sarà una semplice animazione in due fasi. Dreato di testo avrà un passaggio centrale extra. 

@keyFrames TestDraw {
0% {}
50% {}
100% {}
}
@keyFrames ReddFade {
a partire dal{}
per{}
}

09. Assegna animazione e proprietà

SVG and coding

Fai clic sull'icona in alto a destra per ingrandire l'immagine [Immagine: Joseph Ford]

Aggiungiamo il reddFade. animazione a reddbackground. elemento e dargli una durata di un secondo. Un salotto Cubic Bezier è usato per dargli una sensazione più liscia. Noi aggiungiamo avanti Quindi l'elemento mantiene le proprietà dell'ultimo fotogramma chiave quando finisce l'animazione. 

 rect.rectbackground {
Opacità: 0;
Animazione: ReddFade 1S Cubic-Bezier (0.645,
0,045, 0,355, 1) avanti;
}

10. L'animazione rettangolare

SVG image

Fai clic sull'icona in alto a destra per ingrandire l'immagine [Immagine: Joseph Ford]

Con solo due fotogrammi chiave, tutto ciò che dobbiamo fare per il nostro rettangolo è impostato un set di attributi di avvio e finitura. Iniziamo con a 1% larghezza e finitura 100% per dare un 'espansione all'effetto giusto'. Possiamo anche impostare Opacità: 1. all'ultimo fotogramma chiave in modo che la forma svanisce allo stesso tempo. 

 @ @keyFrames ReddFade {
a partire dal {
Larghezza: 1%;
}
per {
Larghezza: 100%;
Opacità: 1;
}
}

11. L'animazione del testo

Creereremo un effetto tra le linee sul nostro testo, quindi utilizzare un riempimento per svanire. Per impostare l'animazione del testo che diamo il nostro Dreato di testo con una durata di quattro secondi. Il cubico Bezier è stato modificato su questo passaggio per dargli un ritmo di movimento leggermente diverso. 

 percorso.RectText {
Opacità: 0;
Animazione: TextDraw 4s
cubic-bezier (.56, -0.04, .32, .7) avanti;
}

12. Ritardare l'inizio

Il nostro testo deve essere eseguito proprio come il rettangolo è finito di sbiadire. Poiché il rettangolo ha una seconda durata, ritardare l'inizio dell'animazione del testo in quel momento. 

 percorso.RectText {
Opacità: 0;
Animazione: TextDraw 4s
cubic-bezier (.56, -0.04, .32, .7) avanti;
Ritardo di animazione: 1s;
}

13. Disegno a linea emula

SVG animation

Fai clic sull'icona in alto a destra per ingrandire l'immagine [Immagine: Joseph Ford]

Per ottenere il nostro effetto di disegno in linea useremo il Stroke-DashArray. e corsa-Dashoffset. parametri. I tuoi valori saranno diversi per i miei a seconda dell'SVG che stai utilizzando. Per trovare il tuo valore, utilizzare i tuoi strumenti di sviluppo preferiti e aumentare Stroke-DashArray. a partire dal 0. fino a quando l'intera forma è coperta da un colpo. 

 percorso.RectText {
Opacità: 0;
Stroke-DashArray: 735;
Animazione: TextDraw 4s
cubic-bezier (.56, -0.04, .32, .7) avanti;
Ritardo di animazione: 1s;
}

14. First Line Drawing Keyframe

Ora abbiamo il nostro obiettivo molto grande che copre l'intero percorso di testo, lo compensiamo con la propria lunghezza per spingerlo in modo efficace. Usando corsa-Dashoffset. per lo stesso valore del nostro dasharray. dovrebbe farlo Impossimo questo nel nostro primo fotogrammi chiave. Faremo anche la forma del riempimento della forma trasparente e stabiliremo l'ictus in bianco se non lo è già. 

 0% {
Riempimento: RGB (255, 255, 255, 0);
ictus: #fff;
STATO-DASHOFFSET: 800;
Opacità: 1;
}

15. Disegna le linee

Il nostro fotogramma chiave centrale appare a 40% attraverso l'animazione. Portiamo il corsa-Dashoffset. Torna a zero Quindi il trattino copre l'intero percorso. Possiamo ri-aggiungere il riempimento trasparente in questa fase per assicurarci che il riempimento appare solo una volta completato il disegno. 

 40% {
corsa-Dashoffset: 0;
Riempimento: RGB (255, 255, 255, 0.0);
}

16. Riempi la forma

Per l'ultima parte dell'animazione, riempiteremo la forma in bianco. Tutto ciò che dobbiamo fare per l'ultimo fotogramma chiave è aumentare il valore alfa del colore di riempimento. Questo crea l'effetto negativo del riempimento. 

 100% {
Riempimento: RGB (255, 255, 255, 1);
corsa-Dashoffset: 0;
Opacità: 1;
}

generate conference

Questo articolo è stato originariamente pubblicato su Creative Web Design Magazine Web designer . Comprare il problema 286. o sottoscrivi .

Per saperne di più:

  • Aggiungi filtri SVG con CSS
  • Come progettare con le forme CSS: un'introduzione
  • Come codificare gli effetti di testo intelligenti con CSS

Come si fa - Articoli più popolari

Inizia con Adobe Dimension CC

Come si fa Jan 25, 2026

La dimensione Adobe rende un gioco da ragazzi per impostare scene complesse (Immagine del credito: Mike Griggs) ..

7 migliori consigli per iniziare la propria attività

Come si fa Jan 25, 2026

Se ti sei sentito bloccato in una solia creativa, potrebbe valere la pena di avere un momento per fare il punto della tua carrier..

Procreare tutorial: Come dipingere come i vecchi maestri

Come si fa Jan 25, 2026

C'è sempre qualcosa di nuovo da imparare dai vecchi maestri, sia che sia composizione, illuminazione o persino una tecnica narra..

Migliora le tue abilità di concept art in Photoshop

Come si fa Jan 25, 2026

Per questo workshop, vorrei mostrarti un modo davvero divertente per disegnare personaggi dalla tua immaginazione. Ti mostrerò c..

Crea nuvole con FUMFX per 3DS MAX

Come si fa Jan 25, 2026

Questa guida passo-passo è impostata per rivelare come procedere alla creazione di nuvole realistiche. Questo tutorial è l'idea..

Come creare risorse digitali

Come si fa Jan 25, 2026

Preparazione delle risorse per uso digitale è un compito principale per Designer Junior. oggi - e distinto da ..

Come mescolare una tavolozza di gouache

Come si fa Jan 25, 2026

Guache è più perdonato della vernice acquerello, ma le decisioni che fai in anticipo possono ancora influenzare il resto del re..

Quattro principi della strategia UX

Come si fa Jan 25, 2026

Un'esperienza utente stellare ( Ux. ) La strategia è un mezzo per raggiungere interruzioni nel mercato attraverso..

Categorie