CSS Motion Path mit SVG: Praxisleitfaden

CSS Motion Path mit SVG

CSS Motion Path bewegt ein Element entlang einer definierten Form. Statt viele translate()-Keyframes zu schreiben, kann ein Marker, Icon oder Badge einer echten SVG-Kurve folgen.

Kurzfassung

offset-path definiert die Route.
offset-distance steuert den Fortschritt auf der Route.
SVG-Path-Daten koennen als CSS path() verwendet werden.
Responsive Layouts brauchen Tests, weil CSS-Pfade nicht automatisch wie eine SVG viewBox skalieren.
prefers-reduced-motion gehoert in jede produktive Animation.

Grundidee

.marker {
  offset-path: path("M20 120 C120 20 220 220 340 80");
  animation: travel 4s linear infinite;
}

@keyframes travel {
  to {
    offset-distance: 100%;
  }
}

Der Wert in path() nutzt SVG-Syntax. Deshalb ist Motion Path besonders praktisch, wenn Designer bereits eine Linie, Route oder Kurve im SVG angelegt haben.

Wann lohnt sich Motion Path?

Gute Einsaetze sind Produktfuehrungen, Kartenrouten, animierte Icons, Ladezustaende und Datenvisualisierungen. Extrahieren Sie zuerst die passende Route mit SVG Path Extractor, pruefen Sie die Datei in SVG Viewer, und vereinfachen Sie das Ergebnis mit SVG Optimizer.

Einfaches Muster

<svg viewBox="0 0 360 160" aria-hidden="true">
  <path d="M20 120 C120 20 220 220 340 80" fill="none" stroke="currentColor" />
</svg>

<span class="dot" aria-label="Upload progress"></span>

.dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #14b8a6;
  offset-path: path("M20 120 C120 20 220 220 340 80");
  offset-distance: 0%;
  offset-rotate: auto;
  animation: move-dot 3200ms ease-in-out infinite;
}

@keyframes move-dot {
  to {
    offset-distance: 100%;
  }
}

offset-rotate: auto dreht das Element in Pfadrichtung. Das passt fuer Pfeile oder Fahrzeuge, aber selten fuer Textlabels.

Responsive und zugänglich

CSS path() bleibt koordinatenbasiert. Wenn sich der Container stark veraendert, kann die Animation optisch verrutschen. Halten Sie den Animationsbereich stabil, nutzen Sie eine klare SVG viewBox, und testen Sie mehrere Viewports.

@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
    offset-distance: 100%;
  }
}

Bewegung sollte Aufmerksamkeit lenken, nicht Inhalte verdecken. Vermeiden Sie starke Endlosschleifen auf Leseseiten und stellen Sie sicher, dass Zustand nie nur durch Bewegung vermittelt wird.

SVGView Workflow

Original in SVG Viewer oeffnen und viewBox pruefen.
Route mit SVG Path Extractor isolieren.
Fremde SVGs mit SVG Sanitizer bereinigen.
Markup mit SVG Formatter lesbar machen.
Mit SVG Optimizer optimieren und erneut testen.

Fazit

CSS Motion Path ist eine saubere Methode, SVG-Pfade in nutzerfreundliche Interface-Bewegung zu verwandeln. Starten Sie mit einfachen Pfaden, halten Sie Animationen zweckmaessig, und pruefen Sie Zugänglichkeit vor dem Release.

CSS Motion Path mit SVG: Praxisleitfaden