Animierte Typografie: "Webdesign auf den Punkt gebracht".

Wie du animierte SVG mit CSS Spezialeffekten entwickelst

Du verfügst über fundierte SVG- sowie CSS-Kenntnisse und hast meinen Artikel Wie du animierte Scalable Vector Graphics (SVG) erstellst bereits gelesen. Dir gefallen GIF-Animationen und du möchtest SVG mit CSS Spezialeffekten erstellen. Wenn dem so ist, dann bis du hier richtig.

Im oben genannten Artikel habe ich dir bereits die Vor- und Nachteile des GIF-Formats und meine Methode, SVG zu animieren, erläutert. Deshalb steige ich direkt ins Thema ein.

Diesmal verwende ich als Beispiel meine "Webdesign auf den Punkt gebracht"-Animation (siehe oben). Wenn du dir die Animation noch einmal ansehen möchtest, klicke einfach oben auf den Schriftzug.

Lade dir die SVG-Datei webdesign-auf-den-punkt-gebracht.zip herunter. Ich werde dir im Folgenden Schritt für Schritt den SVG- und den CSS-Code darin erläutern.

hej, ich bin Ralf, freiberuflicher Webdesigner und Konzepter. Ich kann dich bei vielen Themen rund um deine Website unterstützen. Nachhaltigkeit und nachhaltiges Webdesign liegen mir besonders am Herzen. Hypes, die gerade im Internet kursieren, nehme ich kritisch unter die Lupe. Mein Motto lautet: "Ich muss nicht jede Welle reiten".

Ich freue mich auf unsere Zusammenarbeit.

Ellipse mit radialem Hell-Dunkel-Verlauf

Portrait von Webdesigner Ralf-Alexis Ruf abgebildet auf einem Smartphone

1. Wichtige Voraussetzungen

Vorab möchte ich dir noch eine paar wichtige Voraussetzungen für die Animation von Schrift in Kombination mit grafischen Elementen nennen.

Wenn du Schrift und grafische Elemente zusammen in einer SVG animierst, ist es zwingend notwendig, den Text zuvor in Pfade umzuwandeln. Denn du kannst nicht wissen, welche Schriften auf dem System deiner Besucher*innen installiert sind. Selbst wenn du die auf deiner Website verwendeten Schriften einbindest, ist nicht sichergestellt, dass deine SVG-Animation überall einwandfrei funktioniert. Die Besucher*innen könnten mittels Browsereinstellungen deine mitgelieferten Schriften durch eigene ersetzen.

Einen weiteren Punkt solltest du berücksichtigen: Nicht alle Browser rendern deine mitgelieferten Schriften genau gleich. Schon minimale Abweichungen bei der Laufweite einer Schrift können dafür sorgen, dass Schrift und grafische Elemente nicht mehr aufeinander abgestimmt sind.

Um den Informationsgehalt deiner SVG-Animation zugänglich zu machen, solltest du im img-Tag das title- und das alt-Attribut einbinden. Für die Suchmaschinenoptimierung ist dies ebenfalls relevant.

Wenn du mit lizenzfreien Schriftenarten arbeitest, empfehle ich dir, diese zuvor in starker Vergrößerung (>100pt) zu testen. Manche liefern bei dieser Schriftgröße ein unsauberes Schriftbild, was unprofessionell aussieht.

2. SVG-Code bearbeiten

Bevor du deine eigenen SVG animieren kannst, musst du sie optimieren:

Wandle die Schrift in deiner SVG in Pfade um. Ich nutze Inkscape dafür.
Exportiere die Schriftpfade und alle weiteren Pfade als Plain SVG. Die SVG-Datei darf keine Ebenen, Gruppen oder sonstigen Code enthalten. Für die weitere Bearbeitung benötigst du ausschließlich die einzelnen Pfade.
Öffne die SVG in Visual Studio Code, lösche gegebenenfalls nicht benötigten Code und optimiere jeden Pfad einzeln. https://www.svgviewer.dev/ leistet dir dabei gute Dienste.
Ergänze bei jedem optimierten Pfad eine Class mit dem Namen für die jeweilige Fade-in Animation. Verwende sprechende Namen. Das erleichtert die spätere Zuordnung der Pfade.

Nach diesen Vorbereitungen definierst du die Farbverläufe für den Text. Dazu erstellst du mit "<defs></defs>" einen Definitionsbereich, auf den auch das CSS referenziert. In diesem Definitionsbereich legst du für jede Textzeile einen Farbverlauf nach Folgendem Muster an:

Bei diesem Code handelt es sich um das SVG-eigene Animationsmodell SMIL (Synchronized Multimedia Integration Language) Mit linearGradient definierst du einen Farbverlauf von Anthrazit zu Weiß, x2="120%" bedeutet, dass der Pfad 20% überfüllt wird. Die Überfüllung stellt sicher, dass der Pfad nach beendeter Animation vollständig sichtbar ist. Die "stop offset"-Positionen geben an, an welcher Stelle des Verlaufs welche Farbe angezeigt werden soll. Du kannst Farben als benannte Farben, als HEX-Code oder als RGB angeben. Wenn du mit Transparenz arbeiten möchtest, kannst du auch RGBA-Werte verwenden.

Die eigentliche Animation legst du mit "animate attributeName" fest. Mit "begin" steuerst du die zeitliche Verzögerung, mit der die Animation starten soll, und "dur" gibt die Animationsdauer an. Die Angaben "from" und "to" beziehen sich auf den Pfad. Im aktuellen Beispiel soll der Pfad von links nach rechts mit Anthrazit gefüllt werden, beginnend bei 0% und endend bei 100%.

Klasse, du hast die Pfade und die animierten Farbverläufe fertiggestellt. Jetzt folgt die Animation der einzelnen Textzeilen. Dazu wechselst du zu CSS.

3. CSS-Code schreiben

Zunächst geht es darum, die einzelnen Textzeilen nacheinander einzublenden. Mit folgenden Anweisungen blendest du den Text ein:

.fade-in-w {
fill: url(#wGradient);
opacity: 0;
-webkit-animation: webdesign 1ms linear 1000ms 1 forwards;
-moz-animation: webdesign 1ms linear 1000ms 1 forwards;
animation: webdesign 1ms linear 1000ms 1 forwards;
}

@-webkit-keyframes webdesign {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@-moz-keyframes webdesign {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes webdesign {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

fill: url(#wGradient); referenziert auf den ersten im dev-Bereich der SVG definierten Farbverlauf. Zu Beginn der Animation ist der Text "webdesign" unsichtbar ("opacity: 0;") und soll mit einer Zeitverzögerung von 1000ms eingeblendet werden ("opacity: 1;"). Die Dauer der Animation beträgt 1ms. Der Wert "forwards" sorgt dafür, dass der Endzustand des Animationszyklus erhalten bleibt. Achte darauf, dass die SMIL-gesteuerte Animation des Farbverlaufs und das CSS-gesteuerte Einblenden des Textes zeitlich aufeinander abgestimmt sind. Die Animation des Farbverlaufs sollte 50ms vor dem Einblenden des Textes starten.

Der hereinspringende Punkt ist das Highlight dieser Animation. Bestimmt interessiert dich, wie diese Bewegung technisch umgesetzt werden kann. Dabei handelt es sich um eine Cubic Bezier Animation. So etwas von Hand zu erstellen, wäre sehr mühsam. Der Aufwand stünde nicht im Verhältnis zum Ergebnis. Deshalb gibt es dafür tolle Generatoren, die du kostenlos online nutzen kannst. Mir persönlich gefällt http://jeremyckahn.github.io/stylie/ gut. Die Handhabung ist sehr intuitiv. Du definierst durch Ziehen der Plus-Zeichen Anfangs- und Endpunkt deiner Animation. Anschließend wählst du auf dem Reiter "Keyframes" den Wert "bounce" für die y-Achse. Damit der Punkt an der gewünschten Stelle in deiner SVG herunterspringt, musst du die Positionen der Plus-Zeichen auf die viewBox-Koordinaten deiner SVG abstimmen. Hier ist ausprobieren angesagt, solange bis es passt.

Wenn alles passt, kannst du den Code über den Reiter "Export" exportieren. Die voreingestellte Option "W3C" sollte immer aktiviert sein. Da es sich bei der Cubic Bezier um eine komplexe Animation handelt, verwende ich zusätzlich die Browserpräfixe -webkit- und -moz-.

Nachdem du den generierte Code in deinen CSS-Code integriert hast, optimierst du diesen, um den Code verschlanken. Angaben wie "scale(1)", "rotateX(0deg)", "rotateY(0deg)" und "rotateZ(0deg)" sind für diese Animation nicht notwendig und können gelöscht werden.

Auf "translate(-50%, -50%);" kannst du ebenfalls verzichten. Du musst dann nur den Startpunkt der Animation entsprechend etwas korrigieren. Im aktuellen Beispiel sind es die Werte cx="111" und cy="-3.8" des circle-Objekts in der SVG. Auch hier ist wieder ausprobieren angesagt, solange bis es passt.

Abschließend ersetzt du die px-Werte deiner Cubic Bezier Animation durch %-Werte. So stellst du sicher, dass deine Animation auf jede Größe skaliert werden kann, und alle Elemente trotzdem exakt aufeinander abgestimmt bleiben. Probiere es selbst aus und skaliere deine Animation im Browser, während sie abläuft. Ich finde es faszinierend, wie das funktioniert: Die Animationskurve des hereinspringenden Punktes wird on-the-fly mitskaliert.

4. Animierte SVG minifizieren

Wenn du dein CSS fertiggestellt hast, folgt der letzte Schritt: die Minifizierung deines Codes.

Wie du schon in meinen Artikel Wie du animierte Scalable Vector Graphics (SVG) erstellst gelesen hast, solltest du den SVG- und den CSS-Code getrennt minifizieren. Die minifizierten Codes führst du dann in einer Datei zusammen und speicherst diese als SVG.

Super, jetzt hast du es geschafft. Deine animierte SVG ist nun universell einsetzbar und kann auf nahezu allen gängigen Browsern, Endgeräten und Plattformen angezeigt werden. Hinzu kommt, dass deine SVG in allen Skalierungen gestochen scharf ist und hinsichtlich Dateigröße viele andere Techniken in den Schatten stellt.

5. Wie es weitergehen kann

Ich freue mich, wenn dir meine Anleitung geholfen hat und hoffe, dass du damit eigene coole SVG-Animationen mit CSS-Spezialeffekten entwickeln kannst. Vielleicht hast du selbst Ideen und Anregungen zu diesem Thema, die du mir mitteilen möchtest. Vielleicht habe ich bei meiner Anleitung auch etwas Wichtiges vergessen.

Kontakt aufnehmen

Dir ist das alles zu aufwändig, und du hast keine Zeit und Lust, selbst animierte SVG zu erstellen. Kein Problem, ich unterstütze dich gerne. Wie wäre es mit einem persönlichen Gespräch?

Ja, ich möchte ein Gespräch