Advertisement
  1. Web Design
  2. HTML & CSS

So animieren Sie festliche SVG-Symbole mit CSS

Scroll to top
Read Time: 15 min

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Es ist die Saison, also werde ich in diesem Tutorial einige CSS-animierte SVG-Symbole mit Feiertagsmotiven erstellen. Es gibt einige großartige Symbole auf Iconmelon, einer Website, auf der Sie viele kostenlose Vektor-Icon-Sets finden, in die Sie sich hineinversetzen können. Die Symbole, die ich verwende, stammen von Designer Sam Jones. Also schnapp dir eine Tasse Eierlikör, zieh deinen Laptop zum Weihnachtsprotokoll und los geht's!

SVG und das Web

Wenn Sie an der Verwendung von SVG im Web interessiert sind, sind Symbole ein guter Ausgangspunkt. SVGs sind flexibel, auflösungsunabhängig und leicht, sodass sich Symbole natürlich für das Vektorformat eignen. Ebenso wie HTML können SVGs problemlos mit CSS gestaltet werden, einschließlich CSS3-Animation. Das Hinzufügen eines Schusses Interaktivität mit Animation zu Ihren Symbolen kann dazu beitragen, Ihren Benutzern eine angenehme Erfahrung zu bieten und einen Kontext darüber hinzuzufügen, was ein Symbol darstellt.

Eine Einführung in SVG und das Web finden Sie unter SVG-Dateien: Vom Illustrator zum Web.

Hinweis: Die folgenden Demos verwenden modernste Technologien, die zum Zeitpunkt dieses Schreibens in einigen Browsern wie Internet Explorer nicht unterstützt werden. Wenn Sie dem Tutorial folgen, ist es am besten, wenn Sie Chrome oder Safari verwenden. Mozilla-Unterstützung ist mit den entsprechenden Eigenschaftspräfixen durchaus möglich. Sie können sicher erwarten, dass sich die Unterstützung für diese Technologien in Zukunft verbessern wird.

Zusätzlich: In diesem Artikel habe ich einige notwendige Browserpräfixe aus einigen CSS-Eigenschaften weggelassen, um die Übersichtlichkeit und Lesbarkeit zu gewährleisten. Schauen Sie sich die präfixfreie Bibliothek von Lea Verou an, wenn Sie einfach präfixfreies CSS schreiben möchten. Sie können auch versuchen, Ihre Demos in Codepen zu erstellen, das einfach für die Verwendung ohne Präfix konfiguriert werden kann.


Vorbereiten des SVG-Codes zum Bearbeiten

Einer der größten Probleme bei SVG ist, dass der Code schwer zu handhaben ist. Der SVG-Code, der von Illustrator, meinem bevorzugten Vektorgrafik-Editor, exportiert wird, ist auf den ersten Blick ziemlich unlesbar. Inkscape kann SVG in dieser Hinsicht besser exportieren, aber ich habe festgestellt, dass das Vereinfachen und Formatieren des Codes wesentlich dazu beitragen kann, dass der Code leichter zu lesen und zu bearbeiten ist.

Hier ist der SVG-Code für das erste Animationsbeispiel, das ich demonstrieren werde, ein blinkendes Weihnachtslicht.

Dieser Code wurde aus meinem Vektorbearbeitungswerkzeug Adobe Illustrator exportiert. Es ist auf den ersten Blick fast unlesbar. Hier ist das gleiche Markup vereinfacht:

Ich habe diese XML-Datei erheblich vereinfacht, indem ich einen Großteil des zusätzlichen Markups entfernt habe, das das Programm standardmäßig ausgibt. Mein Basis-SVG-Element enthält Folgendes:

  • Eine Klasse: svg-light. Ich habe das svg-Präfix verwendet, um Elemente innerhalb einer bestimmten SVG einfach anzuvisieren.
  • Die viewbox-Eigenschaft. Der Wert der viewbox-Eigenschaft definiert das Seitenverhältnis des Dokuments und entspricht der Größe der Zeichenfläche in Illustrator.
  • Die Eigenschaft xmnls. Diese Eigenschaft definiert den XML-Namespace der SVG und hilft einigen Benutzeragenten, das Markup zu verstehen.

Auf die im SVG verschachtelten Elemente, die die Formen definieren, aus denen das Bild besteht, wie z. B. die paths, circles und rects, habe ich Klassen inline mit ihrem Eröffnungs-Tag angewendet. Alle Inline-Eigenschaften des Elements, wie z. B. deren Koordinaten, habe ich in neue Linien unterteilt. Außerdem habe ich alle inneren Elemente unter dem SVG-Basistag eingerückt.

All diese Arbeiten haben einen Grund. Erstens erleichtert es das Lesen des Codes erheblich. Zweitens kann ich in meinem Code-Editor der Wahl, Sublime Text 3, einzelne SVG-Elemente oder ganze SVGs problemlos falten, während die Klassennamen weiterhin dazu beitragen, den Kontext über diese Elemente beizubehalten.

Code folding of SVG in Sublime Text 3Code folding of SVG in Sublime Text 3Code folding of SVG in Sublime Text 3
Code-Faltung von SVG in Sublime Text 3

Weihnachtsbeleuchtung

Okay, lassen Sie uns in Urlaubsstimmung geraten und ein blinkendes Weihnachtslicht animieren! Folgendes wollen wir erreichen:

Sehen Sie den Schtift Light von Noah Blon (@noahblon) auf CodePen

Was ich tun möchte, ist das Pfadelement zu animieren, das ich einer Klasse von bulb in der SVG gegeben habe.

Mit CSS gebe ich der Glühbirne eine Füllfarbe und definiere ihre Animationseigenschaften.

Mit der fill-Eigenschaft können Sie die Farbe eines SVG-Elements festlegen. Wenn möglich, verwende ich gerne HSL (Farbton, Sättigung, Helligkeit), um Farbwerte zu definieren, da die Arbeit sehr intuitiv ist. Hier habe ich eine blaue Farbe gewählt (Farbton 204) und den Helligkeitswert niedrig gehalten, 23%, was bedeutet, dass wir eine dunkelblaue Farbe haben.

Ich habe die Glühbirne so eingestellt, dass sie durch eine Keyframe-Animation namens glow-blue animiert wird. Die Dauer der Animation beträgt 1 Sekunde. Die Animation wird unendlich oft wiederholt, was bedeutet, dass sie für immer ausgeführt wird. Das Timing der Animation wird am Anfang und Ende der Keyframes vereinfacht, wodurch ein reibungsloser aussehender Übergang am Start- und Endpunkt der Animation entsteht. Schließlich wird die Animation abwechselnd eingestellt, was bedeutet, dass sie vom Anfang bis zum Ende und wieder zurück geht.

Tipp: Sie wissen vielleicht, dass es eine Kurzschrift-Syntax für CSS-Animationsregeln gibt, aber ich ziehe es im Allgemeinen vor, die Regeln aufzuteilen, damit sie leichter zu verstehen, zu ändern und zu teilen sind, wenn mehrere Animationen verkettet werden.

Jetzt definiere ich die glow-blue Keyframe-Animation:

Hier habe ich die Start- und Endfüllfarbe des Elements festgelegt, auf das diese Animation angewendet wird. Der einzige Wert, der sich ändert, ist die Helligkeit der Farbe (das "l" -Bit in hsl), was bedeutet, dass das Licht von einer dunkleren zu einer helleren Version desselben Farbtons animiert wird. Das ist die intuitive Syntax, die HSL bietet.

Da ich die Animation so definiert habe, dass sie sich unendlich abwechselt, wechselt das Licht von dunkel zu hell und hört nie auf. Es scheint daher zu blinken.

Mehrere Lichter animieren

OK, jetzt lasst uns unseren inneren Clark W. Griswold kanalisieren und eine ganze Menge Weihnachtslichter animieren. Folgendes werde ich erstellen:

Sehen Sie den Stift 540257e4a8b727e435c8e4033602ebb0 von Noah Blon (@noahblon) auf CodePen

Ich habe fünf verschiedenfarbige Lichter erstellt. Jedes Licht ist in ein Div mit einer Breite von 20% eingewickelt. Diese Divs werden dann nach links verschoben, sodass sie in einer Linie zueinander erscheinen. Da ich die SVG nicht auf eine festgelegte Höhe oder Breite festgelegt und die Viewbox-Eigenschaft beibehalten habe, ist die SVG auf die Größe des übergeordneten Elements flüssig, ohne das Seitenverhältnis oder die Qualität zu verlieren. Nur eine der großen Stärken von SVG.

Für jede SVG habe ich die Basisklasse svg-light um ein Farbsuffix erweitert (z. B. svg-light--red). Hier ist ein Auszug der Regeln, nach denen ich die vielen Lichter animiert habe:

Die grundlegenden Animationseigenschaften werden weiterhin auf die Basisklasse von svg-light angewendet, sodass sie von allen Lichtern gemeinsam genutzt werden können. Für jede Farbvariante habe ich eine andere Keyframe-Animation wie z. B. glow-red oder glow-blue erstellt und ihnen unterschiedliche Verzögerungen und Dauern für die Animation zugewiesen. Auf diese Weise blinken die Lichter mit der entsprechenden Farbe und nicht alle gleichzeitig.


Rudolf, das rotnasige Rentier

Ich werde die gleichen Konzepte verwenden, die ich oben beschrieben habe, um das berühmteste Rentier von allen, Rudolph, zu animieren. Hier ist das Endergebnis:

Sehen Sie das mit CSS animierte Stift SVG Rudolph-Symbol von Noah Blon (@noahblon) auf CodePen

Zuerst animiere ich seine leuchtend rote Nase:

Das sieht unserem Weihnachtslicht ziemlich ähnlich. In der Keyframe-Animation animiere ich zu 50% und dann zu 100%. Da die Animationsdauer sechs Sekunden beträgt, bedeutet dies, dass die Nase in drei Sekunden heller rot wird und diese Farbe bis zum Ende der Animation noch drei Sekunden lang beibehält. Da ich die Animation auf alternierend eingestellt habe, wird sie jetzt vom Ende bis zum Anfang ausgeführt. Daher bleibt die Nase weitere drei Sekunden lang rot, bevor sie sich in den letzten drei Sekunden endgültig verdunkelt. Das Verständnis des Zusammenspiels zwischen den Keyframe-Prozentsätzen und den Animationsdefinitionen, z. B. der Dauer, ist der Schlüssel zum Erstellen effektiver CSS-Animationen.

Ich habe auch einen Übergang zum Highlight auf Rudys Nase angewendet:

Hier animiere ich eine andere SVG-Eigenschaft, die fill-opacity. Diese Eigenschaft nimmt einen Wert zwischen 0 und 1 an. 0 ist vollständig transparent, 1 ist vollständig undurchsichtig. Schließlich werde ich Rudy ein bisschen mehr Leben einhauchen, indem ich seine Augen blinzeln lasse:

Ich habe eine Animation namens blink erstellt. Diese Animation läuft acht Sekunden und hört nie auf. Diesmal wechsle ich nicht die Animation, sondern die Animation wird bis zum Ende ausgeführt und dann von Anfang an neu gestartet.

In den Keyframes wird die blinkende Animation erstellt, indem die Skalierung der Augen auf der X- und Y-Achse geändert wird. Beispielsweise werden bei der 1% -Marke die Augen auf der X-Achse auf das 1,3-fache ihrer Größe und auf der Y-Achse auf das 0,1-fache ihrer normalen Größe skaliert. Mit anderen Worten, sie werden etwas breiter und viel kürzer. Ein Prozent der Animationsdauer später kehrt die Skalierung der Augen zum Normalzustand zurück. Daher erfolgt der Skalenwechsel extrem schnell; 8 Sekunden / 100 = 8 Hundertstelsekunden.

Eine Schlüsselkomponente bei der Verwendung der Transformation zum Animieren von SVG-Elementen ist das Festlegen des transform-origin der Elemente. In den meisten Fällen müssen wir den Ursprung der Transformationskoordinate als Mittelpunkt des Elements definieren, damit eine Transformation in einem SVG ordnungsgemäß angewendet wird. Im Gegensatz zu einem HTML-Element ist der Transformationsursprung eines SVG-Elements standardmäßig die obere linke Ecke, die (0,0)-Koordinate. Wenn Sie den Transformationsursprung auf (50%, 50%) setzen, befinden sich die Ursprünge für die X- und Y-Achse der Transformation in der Mitte des Elements, und die Transformationen werden dann korrekt angewendet.

Hinweis: Firefox hat Probleme beim Transformieren des Ursprungs. Wenn Sie den Transformationsursprung auf 50% setzen, werden die X/Y-Koordinaten des Elements leider zurückgesetzt. Eine Problemumgehung besteht darin, das Element wieder in seine ursprüngliche Position zu bringen.


Ding Dong Merrily in der Höhe

Für diese Demo animiere ich eine Glocke, die so läutet:

Sehen Sie den Stift 63cdc3e8e785028deb35132d889b6090 von Noah Blon (@noahblon) auf CodePen

Schauen wir uns einen Auszug aus dem SVG-Markup an:

Ich habe den Glockenumriss eingewickelt und mit einem <g> (oder Gruppen-) Tag gefüllt. Dieses Tag ist sehr nützlich zum Organisieren von Elementen, ähnlich wie Sie mehrere HTML-Elemente mit einem <div> umschließen können. Animationen können auf eine Gruppe angewendet werden. Da in diesem Fall sowohl die Füllungen als auch der Umriss der Glocke gedreht werden sollen, kann ich die Gruppe und nicht jedes Element einzeln drehen.

Dieses CSS sollte inzwischen bekannt sein, aber es passieren einige neue Dinge. Zuerst wird in der Keyframe-Animation die Glocke transformiert, aber anstelle der Transformationsskala transformiere ich den Rotationswert des Elements. Diese Animation lässt die Glocke zwischen 27 und -27 Grad schwingen.

Das andere neue, was ich getan habe, ist, einen negativen Wert für die animation-delay zu verwenden. Ein negativer Wert bewirkt, dass die Animation so lange in der Animation startet. In diesem Fall wird anstelle der Animation, die nach einer Verzögerung von 1,5 Sekunden beginnt, die Animation tatsächlich 1,5 Sekunden nach Beginn der Animation gestartet. Auf diese Weise startet die Glocke an der neutralen Position, die sich 1,5 Sekunden nach Beginn der Animation befindet, und nicht an der gedrehten Position, die sich 0 Sekunden nach Beginn der Animation befindet.

Ich habe eine ähnliche Animation auf die Gruppe angewendet, die die Stürmerelemente der Glocke enthält. Dieses Mal verschiebe oder verschiebe ich jedoch die Elemente entlang der X-Achse, anstatt sie zu drehen, sodass der Stürmer nach links und rechts schwingt.


Lass es schneien! Lass es schneien! Lass es schneien!

Für diese Animation animiere ich Schnee, der in eine Schneekugel fällt.

Sehen Sie den Stift 2addb5f98c757d61cec87bdcacb5870d von Noah Blon (@noahblon) auf CodePen

Ich habe eine Reihe von Kreiselementen erstellt, um Schnee darzustellen, und ich habe diese Elemente um den Umfang der Schneekugel platziert und sie in ein <g>-Tag eingewickelt.

Der Schnee ist außerhalb der Schneekugel nicht sichtbar, da ich der Gruppe, die den Schnee enthält, einen Beschneidungspfad zugewiesen habe. Ein Beschneidungspfad ist eine Form, die auf SVG-Elemente angewendet werden kann, um andere darin zu maskieren. In unserem Globus-Beispiel habe ich einen kreisförmigen Beschneidungspfad erstellt, der das Innere des Globus abdeckt.

Das <clipPath>-Tag ist unser Maskierungselement. Um es zu bewirken, müssen wir ihm eine ID geben.

Ich habe den Beschneidungspfad in ein defs-Tag eingeschlossen. Mit SVG können wir Elemente erstellen, die wir später wiederverwenden können, z. B. Beschneidungspfade, Filter oder Formen, die wir ausstempeln können. Es wird empfohlen, Definitionen wie Beschneidungspfade in ein defs-Tag einzuschließen, damit die SVG-Datei leichter gelesen werden kann.

Um den Beschneidungspfad anzuwenden, verweisen wir in der Inline-Beschneidungspfadeigenschaft eines SVG-Elements auf seine URL, in diesem Fall auf seine ID, der ein Hash-Symbol vorangestellt ist:

Der Schnee ist jetzt nur noch innerhalb dieses kreisförmigen Beschneidungspfades sichtbar.

Der Schnee wird mit den gleichen Techniken animiert, die ich zuvor beschrieben habe. entlang der Y-Achse verschoben und die Füllopazität gegen Null, wenn die Animation endet.

Ja, CSS3-Selektoren arbeiten mit SVG-Elementen! Hier habe ich jedem Schneeelement eine andere Verzögerung gegeben, damit nicht alle auf einmal fallen.


Saisonale Grüße

Abschließend werde ich einen SVG-basierten Text animieren, um ein Ergebnis wie das folgende zu erzielen:

Sehen Sie die Stift-Nachricht von Noah Blon (@noahblon) auf CodePen

SVG bietet uns die Möglichkeit, Striche mit CSS auf SVG-Elemente anzuwenden. In meiner letzten Animation zeige ich Ihnen, wie Sie den Strich eines Elements schrittweise zeichnen.

Um diese Animation zu erzielen, habe ich die folgenden Stricheigenschaften verwendet:

  • stroke-width: die Konturbreite. Dies ist relativ zur Größe des SVG und reagiert daher.
  • stroke: die Farbe der Kontur.
  • stroke-dasharray: definiert eine gestrichelte Kontur. Ein Array alternierender Werte definiert die Länge der gezeichneten Teile der gestrichelten Linie und den leeren Raum zwischen den Konturen.
  • stroke-dashoffset: definiert, wo die Kontur in Bezug auf die Länge des Pfades beginnt.

Das Einrichten des gestrichenen Textes erfordert einige Arbeiten in einem Grafikeditor. Mein Workflow ist wie folgt:

  1. Erstellen Sie ein Textelement.
  2. Konvertieren Sie diesen Text in Vektorpfade.
  3. Führen Sie diese Pfade zu einem zusammengesetzten Pfad zusammen.

Hier ist mein CSS zum Einrichten der Animation:

Ich habe die stroke-dasharray-Eigenschaft als Länge des Gesamtpfads definiert (diesen Wert finden Sie in Illustrator unter der Dokumentinformationspalette mit der Option Objekt). Dann habe ich dem stroke-dashoffset einen Wert für die Gesamtlänge des Pfades gegeben, wodurch der gesamte Strich außer Sichtweite gerät. Durch Keyframe, das die stroke-dashoffset-Eigenschaft animiert, wird der Strich nach und nach auf dem Bildschirm gezeichnet.

Wenn Sie mehr über diese Technik erfahren möchten, lesen Sie Jake Archibalds Beitrag Animierte Konturzeichnung in SVG.

Ich habe auch festgelegt, dass der Text nach Abschluss der Strichzeichnung eingeblendet wird. Dabei habe ich die Eigenschaft "Füllopazität" verwendet, die der zuvor mit der Schneekugelanimation beschriebenen ähnelt.


Mit SVG und CSS weiter gehen

In diesem Tutorial habe ich gezeigt, dass Sie mit CSS und SVG einige ziemlich effektive Animationen erstellen können. Wenn Sie sich mit dem gesamten Code sowie einigen zusätzlichen Animationen beschäftigen möchten, können Sie die Beispiele von Github herunterladen oder meine Sammlung auf Codepen überprüfen.

Wenn Sie sich weiterentwickeln möchten, können Sie CSS-Animationen mit JavaScript steuern oder Ihre CSS-Animationen durch komplexere JavaScript-Animationen ergänzen, wie sie beispielsweise von der erstaunlichen SVG JS-Bibliothek Snap SVG unterstützt werden.

Vielen Dank, dass Sie diesem Tutorial gefolgt sind. Ich kann es kaum erwarten, die Kreationen zu sehen, die Sie sich ausgedacht haben!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.