22: SVG mit CSS animieren - CSS-Tricks

Wenn Sie Inline-SVG verwenden, ist der gesamte SVG-Code im HTML und damit im DOM richtig. Sie können sie so stylen, wie Sie es tun würden .

oder ein anderes HTML-Element. CSS-Styling bietet die Möglichkeit von Animationen und Übergängen.
Ein einfaches Beispiel:

Sehen Sie das Pen CodePen-Logo als Inline-SVG von Chris Coyier (@chriscoyier) auf CodePen.

In diesem Tutorial wurde beschrieben, wie ein etwas komplexeres Design angegangen werden kann. Hier ist diese Demo.

Siehe die Pen Wufoo SVG-Anzeige von Chris Coyier (@chriscoyier) auf CodePen.

In diesem Screencast machen wir eine weitere animierte SVG-Werbung für Wufoo, die fast von vorne anfängt. Das Design enthält einige Wolken, an denen wir uns bewegen und die wir reibungslos und endlos wiederholen können.

Zuerst haben wir Inline-SVG verwendet und es mit CSS animiert, das gerade an dasselbe HTML-Dokument angehängt wurde. Um zu zeigen, wie es funktioniert, haben wir dieses CSS in die SVG selbst verschoben, die vollständig gültig ist. Der Grund, warum Sie dies möglicherweise tun möchten, ist, dass die Animation auch dann ausgeführt werden kann, wenn Sie die SVG als oder verwenden `background-image`.

Demo:

Siehe den Stift kKdDj von Chris Coyier (@chriscoyier) auf CodePen.

Die Browserunterstützung für diese Animation variiert. Zum Zeitpunkt dieses Schreibens funktionierte es nur in Chrome.