Animation zu SVG mit CSS

Sep 14, 2025

wie man

[Bild: Webdesigner]

Wenn es um die Animation mit SVGs geht, kann eine große Ausschaltung die Idee sein, in JavaScript-Bibliotheken festgefahren zu werden. Dies muss jedoch nicht der Fall sein. CSS kann mit der Auswahl einzelner Wege innerhalb einer SVG umgehen, um Effekte zu erzeugen. Ich kann nur wissen, dass die Grundlagen bedeuten, dass es möglich ist, flache, klischeehende Ikonen in etwas ein wenig beeindruckender zu machen. Vielleicht ist es Zeit, die grundlegenden Schritte der SVG-Optimierung und Animation durchzuführen. Wenn Sie in verschiedene Designs integriert sind, dauert es nicht lange, bis die Möglichkeiten endlos sind.

Für mehr Bewegungsinspiration werfen Sie einen Blick auf den kreativen BLOQ-Führer CSS-Animationsbeispiele. und wie man sie kodiert.

Sparen Sie £ 100 mit einem super frühen Vogelticket bis Generieren Sie CSS. , die eintägige Webkonferenz, die von Creative Bloq, Web Designer Magazine und Net Magazine gehostet wird. Buchen Sie hier .

01. Erstellen und speichern

Erstellen Sie zunächst eine SVG, mit der Sie arbeiten können. Für dieses Tutorial verwenden wir eine einfache Grafik in Illustrator. Bei Verwendung von Illustrator zum Exportieren einer SVG reduzieren Sie die Größe des Artboards, um die Grafik anzupassen, und klicken Sie dann auf "Save AS". Wählen Sie SVG aus dem Dropdown-Menü 'Speichern unter Typieren, und dann "SVG-Code ..." im SVG-Optionsdialog.

02. Optimieren Sie für das Web

SVG screenshot — Klicken Sie auf das Symbol oben rechts, um das Bild zu vergrößern [Bild: SVGOMG]

Das Ausschneiden unnötiger Tags macht das Bild leichter, um sich umzugehen. Dies kann manuell erfolgen, indem Sie den Code an Ihren Lieblings-Editor kopieren und leere Tags und Metadaten entfernen. Alternativ namens eine fantastische Ressource Svgomg. wird das automatisch tun. Fügen Sie den Code in den Bereich 'Paste Markup' auf der SVGOMG-Schnittstelle ein, kopieren Sie das Bild anschließend erneut mit der Taste unten rechts.

03. Richten Sie ein HTML-Dokument ein

Öffnen Sie Ihren Code-Editor der Auswahl und richten Sie ein leeres HTML-Dokument ein. Wir schreiben die CSS-Animation in einer Datei namens Main.css. , also schaffen Sie das auch. Um die Dinge auf die Animation zu fokussieren, haben wir in der CSS-Only-Version von Bootstrap 4.1.3 gezogen.

04. Bauen Sie das Layout auf

Lassen Sie uns die Knochen unseres Layouts aufbauen und einen Platz für unsere SVG machen. Wir haben einen Header und zwei Spalten hinzugefügt: einer auf der linken Seite für einen Text, und eins auf der rechten Seite, der die SVG hält, die wir animieren werden. Um die Seite zu beleben, verwenden Sie eine zweite, statische, svg als Hintergrund im Body-Tag.

05. Platzieren Sie den SVG

Wir verwenden unsere Animation, um die Einführung an der Spitze der Seite interessanter zu machen. Fügen Sie den optimierten SVG-Code in die zweite Spalte auf der Seite ein. Wenn Sie Bootstrap verwenden, geben Sie der SVG die Klasse IMG-Flüssigkeit um sicherzustellen, dass es auf den Handys skaliert.

06. ZUM SVG Klassen hinzufügen

Durch das Hinzufügen von Klassen zum SVG können CSS die einzelnen Formen innerhalb des Bildes auswählen. Dies bedeutet, dass Sie unterschiedliche Formen des Bildes zu unterschiedlichen Zeiten animieren können, um eine komplexere Wirkung zu erzeugen.

 & lt; svg & gt;
& lt; g & gt;
& lt; Rect Class = "Rektbackground" Breite = "147.4107"
Höhe = "68.7917" x = "31.2946" y = "114.1042"
RX = "4.5882" RY = "3.9565" Fill = "# 2A7FFF" / & gt;
& lt; Pfadklasse = "Rektlexext" d = "..." Vektor-Effekt = "Nicht-Scaling-Hub" -Takt-Breite = ". 470476156" Font-Size = "12" Fill = "# FFF"
Füllregel = "Evenodd" Strich = "# FFF" Strich-linecap = "runde" / & gt;
& lt; / g & gt;
& lt; / svg & gt;

07. Erste Zustände.

Die Auswahl unserer SVG-Elemente in CSS ist das gleiche wie jedes andere Element. Wir verwenden unsere Klassen, um diese Elemente in der SVG auszuwählen. Beide Teile unserer SVG beginnen, wenn die Seite geladen wird, so versteckt, sodass CSS CSS verwenden, um die Deckkraft des Elements zu setzen 0. .

 path.recttext {
Deckkraft: 0;
}
rect.RectBackground {
Deckkraft: 0;
}

08. Erklären Sie die Animationen

Wir müssen den Namen und den Keyframes für jede Animation deklarieren, damit CSS weiß, was wir tun möchten, wenn wir sie bitten, einen Effekt auszuführen. Ich habe gewählt Textzraw und Rektfade , wie sie jede Animation beschreiben. Rektfade wird eine einfache zweistufige Animation sein. Textzraw wird einen zusätzlichen mittleren Schritt haben.

@Keyframes TextDraw {
0% {}
50% {}
100%{}
}
@Keyframes Rektfade {
von{}
zu{}
}

09. Zeichnen Sie Animation und Eigenschaften zu

SVG and coding — Klicken Sie auf das Symbol oben rechts, um das Bild zu vergrößern [Bild: Joseph Ford]

Wir fügen das hinzu Rektfade Animation an das Rektbackground Element und geben Sie eine Dauer von einer Sekunde. Ein Entschuldigung Cubic Bezier wird verwendet, um ihm ein glatteres Gefühl zu geben. Wir fügen hinzu vorwärts Das Element hält also die Eigenschaften des letzten Keyframe, wenn die Animation endet.

 RECT.RectBackground {
Deckkraft: 0;
Animation: Rektfade 1s Cubic-Bezier (0,645,
0,045, 0,355, 1) vorwärts;
}

10. Die Rechteckanimation

SVG image — Klicken Sie auf das Symbol oben rechts, um das Bild zu vergrößern [Bild: Joseph Ford]

Mit nur zwei Keyframes müssen alles, was wir für unser Rechteck tun müssen, einen Start- und Endsatz von Attributen eingestellt. Beginnen wir mit einem 1% Breite und Finish 100% ein 'Erweiterung des richtigen Effekts'. Wir können auch einstellen Deckkraft: 1. zum letzten Keyframe, so dass die Form gleichzeitig einläuft.

 @Keyframes Rektfade {
von {
Breite: 1%;
}
{{
Breite: 100%;
Deckkraft: 1;
}
}

11. Die Textanimation

Wir werden einen Zeilen-Unentschieden-Effekt auf unseren Text erstellen und dann eine Füllung verwenden, um zu verblassen. Um die Textanimation einzubauen, geben wir ihm unsere Textzraw mit vier Sekundendauer. Der kubische Bezier wurde in diesem Schritt modifiziert, um ihm ein leicht unterschiedliches Bewegungsstunden zu geben.

 path.recttext {
Deckkraft: 0;
Animation: TextDraw 4s
Cubic-Bezier (.56, -0,04 ,.32, 0,7) nach vorne;
}

12. den Start verzögern

Unser Text muss ausgeführt werden, wie das Rechteck verblassen hat. Da das Rechteck eine zweite Dauer hat, verzögern Sie den Start der Textanimation zu diesem Zeitpunkt.

 path.recttext {
Deckkraft: 0;
Animation: TextDraw 4s
Cubic-Bezier (.56, -0,04 ,.32, 0,7) nach vorne;
Animationsverzögerung: 1s;
}

13. Zeichnung emulieren

SVG animation — Klicken Sie auf das Symbol oben rechts, um das Bild zu vergrößern [Bild: Joseph Ford]

Um unseren Leitungszeichnungseffekt zu erhalten, verwenden wir die Strich-Dasharray und Strich-Dashoffset. Parameter. Ihre Werte unterscheiden sich in Abhängigkeit von der von Ihnen verwendeten SVG. Um Ihren Wert zu finden, verwenden Sie Ihre bevorzugten Entwicklerwerkzeuge und erhöhen Sie Strich-Dasharray von 0. bis die gesamte Form von einem Hub bedeckt ist.

 path.recttext {
Deckkraft: 0;
Strich-Dasharray: 735;
Animation: TextDraw 4s
Cubic-Bezier (.56, -0,04 ,.32, 0,7) nach vorne;
Animationsverzögerung: 1s;
}

14. Erster Zeichnungs-Keyframe

Jetzt haben wir unseren sehr großen Schlaganfall, der den gesamten Textpfad bedeckt, lasst uns es durch ihre eigene Länge ausgleichen, um ihn effektiv wegzuschieben. Verwendet Strich-Dashoffset. für den gleichen Wert wie unser den Dasharray Sollte es tun. Lassen Sie uns dies in unseren ersten Keyframe einstellen. Wir werden auch die Form transparent füllen und den Hub auf weiß einstellen, wenn es nicht bereits ist.

 0% {
Fill: RGB (255, 255, 255, 0);
Schlaganfall: #FFF;
Strich-Dashoffset: 800;
Deckkraft: 1;
}

15. Zeichnen Sie die Linien

Unser mittlerer Keyframe erscheint an 40% durch die Animation. Wir bringen das mit Strich-Dashoffset. Zurück zu Null, also deckt der CRASH den gesamten Weg ab. Wir können die transparente Füllung in dieser Phase erneut hinzufügen, um sicherzustellen, dass die Füllung nur angezeigt wird, wenn die Zeichnung abgeschlossen ist.

 40% {
Strich-Dashoffset: 0;
Füllen: RGB (255, 255, 255, 0,0);
}

16. Füllen Sie die Form aus

Für den letzten Teil der Animation füllen wir die Form in Weiß. Alles, was wir für den letzten Keyframe tun müssen, ist der Alpha-Wert der Füllfarbe. Dadurch entsteht der Fade-In-Effekt der Füllung.

 100% {
Fill: RGB (255, 255, 255, 1);
Strich-Dashoffset: 0;
Deckkraft: 1;
}

Dieser Artikel wurde ursprünglich im Creative Web Design Magazine veröffentlicht Webdesigner . Ausgabe 286 kaufen oder abonnieren .

Weiterlesen:

Fügen Sie SVG-Filter mit CSS hinzu
Wie gestaltet man mit CSS-Formen: eine Einführung
So codieren Sie Smart Text-Effekte mit CSS

Animation zu SVG mit CSS

01. Erstellen und speichern

02. Optimieren Sie für das Web

03. Richten Sie ein HTML-Dokument ein

04. Bauen Sie das Layout auf

05. Platzieren Sie den SVG

06. ZUM SVG Klassen hinzufügen

07. Erste Zustände.

08. Erklären Sie die Animationen

09. Zeichnen Sie Animation und Eigenschaften zu

10. Die Rechteckanimation

11. Die Textanimation

12. den Start verzögern

13. Zeichnung emulieren

14. Erster Zeichnungs-Keyframe

15. Zeichnen Sie die Linien

16. Füllen Sie die Form aus

wie man - Die beliebtesten Artikel

Wie kann man die Schrift in Ihrem Instagram BIO ändern

So fügen Sie Schriftarten in Photoshop hinzu

17 Tipps zum Zeichnen von Manga-Gesichtern

3 Essential Zbrush-Retopologie-Techniken

So nehmen Sie einen Screenshot auf einem Mac

Entwerfen Sie einen spielbaren Avatar für ein Videospiel

Fashion Flexible Layouts mit CSS-Gitter

Erstellen Sie einen einfachen Musik-Player mit der Reaktion

Kategorien