Annäherung an SVG-Animationen in CSS

Animationen sind ein allgegenwärtiger Bestandteil des Webs. Im Gegensatz zu den blinkenden GIF-Bildern, die Websites in früheren Tagen des Internets plagten, sind die heutigen Animationen subtiler und geschmackvoller. Designer und Frontend-Spezialisten verwenden sie, um Websites aufpolierter aussehen zu lassen, die Benutzererfahrung zu verbessern, die Aufmerksamkeit auf wichtige Elemente zu lenken und Informationen zu vermitteln.

Webentwickler können von der Kombination der Leistungsfähigkeit von SVG und CSS profitieren, um Animationen zu erstellen, ohne externe Bibliotheken verwenden zu müssen. Dieses SVG-Animations-Tutorial zeigt, wie Sie benutzerdefinierte Animationen für reale Projekte erstellen.

SVG-Animation mit CSS: Kernkonzepte

Vor dem Animieren von SVGs mit CSS müssen Entwickler verstehen, wie SVGs intern funktionieren. Glücklicherweise ist es ähnlich wie bei HTML: Wir definieren SVG-Elemente mit XML-Syntax und stylen sie mit CSS, als wären sie HTML.

SVG-Elemente werden speziell zum Zeichnen von Grafiken erstellt. Wir können <rect> zum Zeichnen eines Rechtecks, <circle> zum Zeichnen von Kreisen usw. verwenden. SVG definiert auch <ellipse> , <line> , <polyline> , <polygon> und <path> .

Hinweis: Die vollständige Liste der SVG-Elemente enthält sogar <animate> , mit dem Sie Animationen mit der synchronisierten Multimedia-Integrationssprache (SMIL) erstellen können. Seine Zukunft ist jedoch ungewiss, und das Chromium-Team empfiehlt, wann immer möglich, einen CSS- oder JavaScript-basierten Ansatz zur Animation von SVGs zu verwenden.

Die verfügbaren Attribute hängen vom Element ab. Während also <rect> width und height hat, hat das <circle> -Element das r Attribut, das seinen Radius definiert.

Während die meisten HTML-Elemente untergeordnete Elemente haben können, können die meisten SVG-Elemente dies nicht. Eine Ausnahme ist das Gruppenelement <g> , das wir verwenden können, um CSS-Stile und Transformationen auf mehrere Elemente gleichzeitig anzuwenden.

Das <svg> -Element und seine Attribute

Ein weiterer wichtiger Unterschied zwischen HTML und SVG besteht darin, wie wir Elemente positionieren, insbesondere über das viewBox Attribut eines gegebenen äußeren <svg> -Elements. Sein Wert besteht aus vier Zahlen, die durch Leerzeichen oder ein Komma getrennt sind: min-x , min-y , width und height . Zusammen geben diese an, wie viel von unserer SVG-Zeichnung der Browser rendern soll. Dieser Bereich wird so skaliert, dass er in die Grenzen des Ansichtsfensters passt, wie durch die Attribute width und height des <svg> -Elements definiert.

Beim Letterboxing kann sich das Verhältnis der width und height des Viewports tatsächlich von dem Verhältnis der width und height des viewBox Attributs unterscheiden.

Standardmäßig wird das Seitenverhältnis der SVG-Leinwand auf Kosten einer größer als angegebenen viewBox , wodurch ein kleineres Letterbox-Rendering im Ansichtsfenster verursacht wird. Sie können jedoch über preserveAspectRatio Attribut „konserveAspectRatio“ ein anderes Verhalten angeben.

Dadurch können wir Bilder isoliert zeichnen und sicher sein, dass alle Elemente unabhängig vom Kontext oder der Rendering-Größe korrekt positioniert werden.

Während Sie SVG-Bilder von Hand codieren können, erfordern komplexere Bilder möglicherweise ein Vektorgrafikprogramm (unser SVG-Animations-Tutorial demonstriert beide Techniken). Mein bevorzugter Editor ist Affinity Designer, aber jeder Editor sollte genügend Funktionalität für die hier behandelten einfachen Operationen bieten.

CSS-Übergänge und Animationen

CSS-Übergänge ermöglichen es uns, die Rate und Dauer von Eigenschaftsänderungen zu definieren. Anstatt sofort vom Startwert zum Endwert zu springen, wechseln die Werte fließend wie in diesem Beispiel, in dem sich die Farbe eines SVG-Kreises ändert, wenn Sie mit der Maus darüber fahren:

Sehen Sie sich das Beispiel Pen Transition von Filip Defar (@dabrorius) auf CodePen an.

Wir können Übergänge mit der transition definieren, die den Namen der Eigenschaft akzeptiert, die wir übergehen möchten, die Dauer des Übergangs, eine Übergangszeitfunktion (auch bekannt als Beschleunigungsfunktion) und die Länge der Verzögerung, bevor der Effekt beginnt :

 /* property name | duration | easing function | delay */ transition: margin-right 4s ease-in-out 1s;

Wir können Übergänge für mehrere CSS-Eigenschaften definieren, von denen jede separate Übergangswerte haben kann. Es gibt jedoch zwei offensichtliche Einschränkungen bei diesem Ansatz.

Die erste Einschränkung besteht darin, dass Übergänge automatisch ausgelöst werden, wenn sich ein Eigenschaftswert ändert. Dies ist in einigen Anwendungsfällen unpraktisch. Zum Beispiel können wir keine Animation haben, die sich endlos wiederholt.

Die zweite Einschränkung besteht darin, dass Übergänge immer zwei Schritte haben: den Anfangszustand und den Endzustand. Wir können die Dauer der Animation verlängern, aber wir können keine anderen Keyframes hinzufügen.

Aus diesem Grund gibt es ein leistungsfähigeres Konzept: CSS-Animationen. Bei CSS-Animationen können wir mehrere Keyframes und eine Endlosschleife haben:

Sehen Sie sich das Beispiel für die Stiftanimation von Filip Defar (@dabrorius) auf CodePen an.

Um CSS-Eigenschaften über mehrere Keyframes zu animieren, müssen wir zuerst die Keyframes mit einer @keyframes at-Regel definieren. Das Timing von Keyframes wird in relativen Einheiten (Prozent) definiert, da wir an dieser Stelle die Animationsdauer noch nicht definiert haben. Jeder Keyframe beschreibt die Werte einer oder mehrerer CSS-Eigenschaften zu diesem Zeitpunkt. CSS-Animationen sorgen für reibungslose Übergänge zwischen Keyframes.

Die Animation mit beschriebenen Keyframes wenden wir über die animation auf das gewünschte Element an. Ähnlich wie die transition akzeptiert sie eine Dauer, eine Beschleunigungsfunktion und eine Verzögerung.

Der einzige Unterschied besteht darin, dass der erste Parameter unser @keyframes Name anstelle eines Eigenschaftsnamens ist:

 /* @keyframes name | duration | easing-function | delay */ animation: my-sliding-animation 3s linear 1s;

Animieren eines Hamburger-Menüschalters

Nachdem wir nun ein grundlegendes Verständnis dafür haben, wie das Animieren von SVGs funktioniert, können wir mit dem Erstellen einer klassischen Animation beginnen – einem Menüumschalter, der nahtlos zwischen einem „Hamburger“-Symbol und einer Schließen-Schaltfläche (einem „X“) wechselt:

Sehen Sie sich den Pen Hamburger von Filip Defar (@dabrorius) auf CodePen an.

Dies ist eine subtile, aber wertvolle Animation. Es zieht die Aufmerksamkeit des Benutzers auf sich und informiert ihn darüber, dass das Symbol zum Schließen des Menüs verwendet werden kann.

Wir beginnen unsere Demonstration, indem wir ein SVG-Element mit drei Zeilen erstellen:

 <svg class="hamburger"> <line x1="0" y1="50%" x2="100%" y2="50%" class="hamburger__bar hamburger__bar--top" /> <line x1="0" y1="50%" x2="100%" y2="50%" class="hamburger__bar hamburger__bar--mid" /> <line x1="0" y1="50%" x2="100%" y2="50%" class="hamburger__bar hamburger__bar--bot" /> </svg>

Jede Zeile hat zwei Sätze von Attributen. x1 und y1 stellen die Koordinaten des Linienanfangs dar, während x2 und y2 die Koordinaten des Linienendes darstellen. Wir haben relative Einheiten verwendet, um Positionen festzulegen. Auf diese Weise können Sie auf einfache Weise sicherstellen, dass Bildinhalte an das enthaltende SVG-Element angepasst werden. Während dieser Ansatz in diesem Fall funktioniert, gibt es einen großen Nachteil: Wir können das Seitenverhältnis von Elementen, die auf diese Weise positioniert sind, nicht beibehalten. Dafür müssten wir das viewBox Attribut des <svg> -Elements verwenden.

Beachten Sie, dass wir CSS-Klassen auf SVG-Elemente angewendet haben. Es gibt viele Eigenschaften, die über CSS geändert werden können, also wenden wir einige grundlegende Stile auf unsere SVG-Elemente an.

Wir legen die Größe des <svg> -Elements fest und ändern den Cursortyp, um anzuzeigen, dass er anklickbar ist. Aber um die Farbe und Dicke der Linien festzulegen, verwenden wir die Eigenschaften stroke und stroke-width . Sie haben vielleicht erwartet, color oder border zu verwenden, aber im Gegensatz zu <svg> selbst sind SVG-Unterelemente keine HTML-Elemente, daher haben sie oft unterschiedliche Eigenschaftsnamen:

 .hamburger { width: 62px; height: 62px; cursor: pointer; } .hamburger__bar { stroke: white; stroke-width: 10%; }

Wenn wir an dieser Stelle rendern, sehen wir, dass alle drei Linien die gleiche Größe und Position haben und sich vollständig überlappen. Leider können wir die Anfangs- und Endpositionen nicht selbstständig per CSS ändern, aber wir können ganze Elemente verschieben. Lassen Sie uns die oberen und unteren Balken mit der CSS-Eigenschaft transform verschieben:

 .hamburger__bar--top { transform: translateY(-40%); } .hamburger__bar--bot { transform: translateY(40%); }

Durch Verschieben der Balken auf der Y-Achse erhalten wir einen anständig aussehenden Hamburger.

Jetzt ist es an der Zeit, unseren zweiten Zustand zu codieren: die Schließen-Schaltfläche. Wir verlassen uns auf eine .is-opened CSS-Klasse, die auf das SVG-Element angewendet wird, um zwischen den beiden Zuständen umzuschalten. Um das Ergebnis zugänglicher zu machen, packen wir unser SVG in ein <button> -Element und verarbeiten Klicks auf dieser Ebene.

Der Prozess des Hinzufügens und Entfernens der Klasse wird durch ein einfaches JavaScript-Snippet abgewickelt:

 const hamburger = document.querySelector("button"); hamburger.addEventListener("click", () => { hamburger.classList.toggle("is-opened"); });

Um unser X zu erstellen, können wir eine andere transform auf unsere Hamburgerriegel anwenden. Da die neue transform die alte überschreibt, ist unser Ausgangspunkt die ursprüngliche, gemeinsame Position der drei Balken.

Von dort aus können wir die obere Leiste um 45 Grad im Uhrzeigersinn um ihren Mittelpunkt und die untere Leiste um 45 Grad gegen den Uhrzeigersinn drehen. Wir können den mittleren Balken horizontal schrumpfen, bis er schmal genug ist, um hinter der Mitte des X verborgen zu werden:

 .is-opened .hamburger__bar--top { transform: rotate(45deg); } .is-opened .hamburger__bar--mid { transform: scaleX(0.1); } .is-opened .hamburger__bar--bot { transform: rotate(-45deg); }

Standardmäßig ist die Eigenschaft transform-origin für SVG-Elemente normalerweise 0,0 . Das bedeutet, dass unsere Balken um die obere linke Ecke des Ansichtsfensters gedreht werden, aber wir möchten, dass sie sich um die Mitte drehen. Um dies zu beheben, setzen wir die Eigenschaft transform-origin für die Klasse .hamburger__bar auf center .

Animieren von CSS-Eigenschaften mit transition

Die transition -CSS-Eigenschaft weist den Browser an, reibungslos zwischen zwei verschiedenen Zuständen von CSS-Eigenschaften zu wechseln. Hier möchten wir unsere Änderungen an der transform -Eigenschaft animieren, die die Positionen, Ausrichtung und Skalierung der Balken vorschreibt.

Wir können auch die Dauer des Übergangs mit der Eigenschaft transition-duration steuern. Damit die Animation bissig aussieht, stellen wir eine kurze Dauer von 0,3 Sekunden ein:

 .hamburger__bar { transition-property: transform; transition-duration: 0.3s; ... }

Das einzige Stück JavaScript, das wir brauchen, ist das Bit, das den Symbolstatus umschaltbar macht:

 const hamburger = document.querySelector("button"); hamburger.addEventListener("click", () => { hamburger.classList.toggle("is-opened"); });

Hier wählen wir das äußere SVG-Element anhand seiner .mute -Klasse mit querySelector() . Anschließend fügen wir einen Click-Event-Listener hinzu. Wenn ein Click-Ereignis ausgelöst wird, schalten wir die .is-active Klasse nur für <svg> selbst um – nicht tiefer in der Hierarchie. Da wir die CSS-Animation nur auf Elemente mit der Klasse .is-active angewendet haben, wird durch Umschalten dieser Klasse die Animation aktiviert und deaktiviert.

Als letzten Schliff konvertieren wir den HTML-Körper in einen flexiblen Container, der uns hilft, das Symbol horizontal und vertikal zu zentrieren. Wir werden auch die Hintergrundfarbe auf ein sehr dunkles Grau und die Symbolfarbe auf Weiß aktualisieren, um ein elegantes „Dunkelmodus“-Look-and-Feel zu erreichen:

 body { display: flex; justify-content: center; align-items: center; background-color: #222; height: 100vh; }

Damit haben wir eine voll funktionsfähige animierte Schaltfläche mit grundlegendem CSS und einem kurzen JavaScript-Snippet erstellt. Es ist einfach, die von uns angewendeten Transformationen zu ändern, um eine Vielzahl von Animationen zu erstellen. Leser können einfach den CodePen forken – der ein bisschen zusätzliches CSS zum Polieren enthält – und kreativ werden.

Arbeiten mit SVG-Daten aus externen Editoren

Unser Hamburger-Menü ist extrem einfach. Was ist, wenn wir etwas komplexer machen wollen? Hier wird es schwierig, SVG von Hand zu codieren, und eine Software zur Bearbeitung von Vektorgrafiken kann helfen.

Unsere zweite SVG-Animation ist eine Stummschalttaste mit einem Kopfhörersymbol. Wenn die Musik aktiv ist, pulsiert und tanzt das Symbol; Wenn es stummgeschaltet ist, wird das Symbol durchgestrichen:

Sehen Sie sich die Pen Mute-Taste - 5 - rot durchgestrichen von Filip Defar (@dabrorius) auf CodePen an.

Das Zeichnen von Symbolen würde den Rahmen dieses Tutorials sprengen (und wahrscheinlich Ihre Stellenbeschreibung), also beginnen wir mit einem vorgezeichneten SVG-Symbol. Wir wollen auch das gleiche body -Styling wie in unserem Hamburger-Menü-Beispiel.

Möglicherweise möchten Sie den SVG-Code bereinigen, bevor Sie damit arbeiten. Sie können dies mit svgo tun, einem auf Node.js basierenden Open-Source-SVG-Optimierungstool. Dadurch werden unnötige Elemente entfernt und der Code lässt sich leichter von Hand bearbeiten, was Sie tun müssen, um Klassen hinzuzufügen und verschiedene Elemente zu kombinieren.

In Bildbearbeitungssoftware erstellte SVG-Symbole verwenden wahrscheinlich keine relativen Einheiten. Außerdem möchten wir sicherstellen, dass das Seitenverhältnis des Symbols beibehalten wird, unabhängig vom Seitenverhältnis des SVG-Elements, das es enthält. Um diese Steuerungsebene zu ermöglichen, verwenden wir das viewBox Attribut.

Es ist eine gute Idee, die SVG-Größe so zu ändern, dass viewBox auf einige einfach zu verwendende Werte eingestellt werden kann. In diesem Fall habe ich es in eine viewBox mit 100 x 100 Pixel konvertiert.

Stellen wir sicher, dass das Symbol zentriert und in der richtigen Größe ist. Wir wenden die mute -Klasse auf unser Basis-SVG-Element an und fügen dann die folgenden CSS-Stile hinzu:

 .mute { fill: white; width: 80px; height: 70px; cursor: pointer; }

Hier ist die width etwas größer als die height , um ein Abschneiden während der Drehungen unserer Animation zu vermeiden.

Unser Ausgangspunkt für SVG-Animationen

Das jetzt saubere SVG enthält ein einzelnes <g> -Element, das drei <path> -Elemente enthält.

Mit dem Pfadelement können wir Linien, Kurven und Bögen zeichnen. Pfade werden mit einer Reihe von Befehlen beschrieben, die beschreiben, wie die Form gezeichnet werden soll. Da unser Symbol aus drei nicht verbundenen Formen besteht, haben wir drei Pfade, um sie zu beschreiben.

Das g SVG-Element ist ein Container, der zum Gruppieren anderer SVG-Elemente verwendet wird. Wir verwenden es, um die pulsierenden und tanzenden Transformationen auf allen drei Pfaden gleichzeitig anzuwenden.

 <svg class="mute" viewBox="0 0 100 100"> <g> <path d="M92.6,50.075C92.213,26.775 73.25,7.938 50,7.938C26.75,7.938 7.775,26.775 7.388,50.075C3.112,51.363 -0.013,55.425 -0.013,60.25L-0.013,72.7C-0.013,78.55 4.575,83.3 10.238,83.3L18.363,83.3L18.363,51.6C18.4,51.338 18.438,51.075 18.438,50.813C18.438,33.275 32.6,19 50,19C67.4,19 81.563,33.275 81.563,50.813C81.563,51.088 81.6,51.338 81.638,51.6L81.638,83.313L89.763,83.313C95.413,83.313 100.013,78.563 100.013,72.713L100.013,60.263C100,55.438 96.875,51.362 92.6,50.075Z" /> <path d="M70.538,54.088L70.538,79.588C70.538,81.625 72.188,83.275 74.225,83.275L74.225,83.325L78.662,83.325L78.662,50.4L74.225,50.4C72.213,50.4 70.538,52.063 70.538,54.088Z" /> <path d="M25.75,50.4L21.313,50.4L21.313,83.325L25.75,83.325L25.75,83.275C27.788,83.275 29.438,81.625 29.438,79.588L29.438,54.088C29.45,52.063 27.775,50.4 25.75,50.4Z" /> </g> </svg>

Um die Kopfhörer zum Pulsieren und Tanzen zu bringen, reicht der transition nicht aus. Dies ist ein Beispiel, das komplex genug ist, um Keyframes zu benötigen.

In diesem Fall verwenden unsere Start- und End-Keyframes (bei 0 % bzw. 100 % der Animation) ein leicht geschrumpftes Kopfhörersymbol. Für die ersten 40 % der Animation vergrößern wir das Bild leicht und neigen es um 5 Grad. Dann skalieren wir sie für die nächsten 40 % der Animation wieder auf 0,9x und drehen sie um 5 Grad auf die andere Seite. Schließlich kehrt die Symbolumwandlung für die letzten 20 % der Animation zu denselben Anfangsparametern zurück, um eine reibungslose Schleife zu erhalten.

 @keyframes pulse { 0% { transform: scale(0.9); } 40% { transform: scale(1) rotate(5deg); } 80% { transform: scale(1) rotate(-5deg); } 100% { transform: scale(0.9) rotate(0); } }

 100% { transform: scale(0.9); }

 0%, 100% { transform: scale(0.9); }

Nachdem wir nun die Animations-Keyframes definiert haben, können wir die Animation anwenden. Wir fügen die Klasse .mute__headphones zum <g> -Element hinzu, sodass sie sich auf alle drei Teile des Kopfhörersymbols auswirkt. Zuerst setzen wir transform-origin erneut auf center , da wir möchten, dass sich das Symbol um seinen Mittelpunkt dreht. Wir skalieren es auch so, dass seine Größe mit dem anfänglichen Animations-Keyframe übereinstimmt. Ohne diesen Schritt führt der Wechsel vom statischen „stummgeschalteten“ zum animierten Symbol immer zu einem plötzlichen Größensprung. (Wie auch immer, das Zurückschalten auf stumm führt zu einem Sprung in der Skalierung – und wahrscheinlich auch zu einer Drehung – wenn der Benutzer klickt, während die Skalierung größer als 0,9x ist. Wir können diesen Effekt mit CSS allein nicht viel ändern.)

Wir wenden die Animation mit der CSS-Eigenschaft animation an, aber nur, wenn die übergeordnete Klasse .is-active vorhanden ist, ähnlich wie wir unser Hamburger-Menü animiert haben.

 .mute__headphones { transform-origin: center; transform: scale(0.9); } .is-active .mute__headphones { animation: pulse 2s infinite; }

Das JavaScript, das wir brauchen, um zwischen den Zuständen wechseln zu können, folgt ebenfalls dem gleichen Muster wie das Hamburger-Menü:

 const muteButton = document.querySelector(".mute"); muteButton.addEventListener("click", () => { muteButton.classList.toggle("is-active"); });

Als nächstes fügen wir eine durchgestrichene Linie hinzu, die angezeigt wird, wenn das Symbol inaktiv ist. Da es sich um ein einfaches Designelement handelt, können wir es manuell codieren. Hier ist es hilfreich, einfache und vernünftige viewBox Werte zu haben. Wir wissen, dass die Ränder der Leinwand bei 0 und 100 liegen, daher ist es einfach, die Start- und Endpositionen für unsere Linie zu berechnen:

 <line x1="12" y1="12" x2="88" y2="88" class="mute__strikethrough" />

Da wir eine Klasse direkt auf unser durchgestrichenes <line> -Element angewendet haben, können wir es über CSS formatieren. Wir müssen nur sicherstellen, dass die Linie nicht sichtbar ist, wenn das Symbol aktiv ist:

 .mute__strikethrough { stroke: red; opacity: 0.8; stroke-width: 12px; } .is-active .mute__strikethrough { opacity: 0; }

Optional können wir die Klasse .is-active direkt zum SVG hinzufügen. Dadurch beginnt die Animation, sobald die Seite geladen wird, sodass wir den Anfangszustand des Symbols effektiv von nicht animiert (stumm) in animiert (nicht stumm) ändern.

CSS-basierte SVG-Animation ist da, um zu bleiben

Wir haben nur an der Oberfläche von CSS-Animationstechniken und der Funktionsweise von Ansichtsfenstern gekratzt. Es lohnt sich zu wissen, wie man SVG-Code von Hand schreibt, um einfache Animationen einfach zu halten, aber es ist auch wichtig zu wissen, wie und wann man Grafiken verwendet, die mit externen Editoren erstellt wurden. Während moderne Browser es uns ermöglichen, beeindruckende Animationen nur mit integrierten Funktionen zu erstellen, möchten Entwickler für (sehr) komplexe Anwendungsfälle möglicherweise Animationsbibliotheken wie GSAP oder anime.js erkunden.

Animationen müssen nicht extravaganten Projekten vorbehalten sein. Moderne CSS-Animationstechniken ermöglichen es uns, eine breite Palette ansprechender und ausgefeilter Animationen auf einfache, browserübergreifende kompatible Weise zu erstellen.

Besonderer Dank geht an Mike Zeballos für die technische Überprüfung dieses Artikels!