CSS Animation entlang eines Pfades: offset-path

CSS Animationen mit offset-path

CSS kann Elemente bewegen, rotieren, verkleinern und vergrößern – das sind einfache Transformationen. Das Motion Path Module Level 1 erweitert die CSS-Animationen um die Möglichkeit, Elemente entlang eines Pfades zu animieren:

offset-path: nutzt komplexe Pfade (z. B. einen SVG-Pfad), denen ein Element folgen soll.

Der grüne Flieger ist ein PNG-Bild, also ein HTML-Element – kein SVG.

<img id="flieger" src="flieger-1.png" alt="Motion Path Acht" width="100" height="50">

CSS offset-path animiert sowohl SVG- als auch HTML-Elemente mit der bekannten CSS-Syntax für Animationen.

.container {
      width: 400px;
      height: 250px;
      border: 1px solid #ccc;
      position: relative;
      margin: 20px auto;
      background: url(grid-50.svg)
}

#flieger {
	position: absolute;
	/* Definiert den Animationspfad */
	offset-path: path("M 4,203 C 200,205 338,7 200,10 51,7 196,204 396,203");
	/* Startposition auf dem Pfad (0% = Start, 100% = Ende) */
	offset-distance: 0%;
	offset-rotate: auto;
	animation: move 10s 3s linear infinite;
}
   
 @keyframes move {
      to {
        offset-distance: 100%;
      }
 }

offset

shorthand / Kurzschrift

offset-path

ist der Pfad, an dem das Element ausgerichtet wird. Der Pfad ist das d-Attribut eines SVG-Elements, wie er in SVG 1.1 definiert ist.

offset-distance

ist der Bereich des Pfades, an dem das Objekt in der Animation erscheint und wird entweder als Floating Point-Wert oder in % notiert. Mit offset-distance von 0 bis 100% läuft das Element entlang des vollständigen Pfades.

offset-rotate

Ausrichtung entlang des Pfades

animation

ist die bekannte Parameter-Liste der Animation: animation-name, animation-duration, animation-delay, animation-iteration-count, und animation-timing-function (Easing).

Am Rande: Die CSS-offset-path-Eigenschaften waren bereits zu einem frühen Zeitpunkt in Chrome als motion-path installiert und wurden etwas später umbenannt:

• aus motion-path wurde offset-path
• aus motion-offset wurde offset-distance
• aus motion-rotation wurde offset-rotate

Animation entlang eines Pfades mit SVG und SMIL

Nach der Ankündigung der Blink-Entwickler, dass SMIL nicht mehr erwünscht sei, traut sich kaum noch jemand, eine SVG SMIL-Animation ins Web zu setzen – obwohl die Ankündigung nicht umgesetzt wurde. Sehen wir uns die Animation entlang einer Acht trotzdem noch als SMIL animate Motion an – in Firefox, Safari, Opera oder Chrome:

<animateMotion
       begin="0s" dur="8s"
       rotate="auto"
       repeatCount="indefinite">
       <mpath xlink:href="#eight" />
 </animateMotion>

animateMotion funktioniert ebenfalls, wenn das SVG mit einem img-Tag geladen wird, kann durch Events wie onload, onclick oder ontouch gestartet werden. Als SVG sind auch die Animationen responsive.

Am Rande: Wie wird ein Offset Path erzeugt?

Adobe Photoshop exportiert Pfade (»Form« – nicht »Pfad«) als SVG. Genauso wie bei Inkscape oder Adobe Illustrator wird nur das d-Attribut des Pfad-Elements als Motion Path übernommen.

offset-path, offset-distance und offset-rotate agieren sowohl als pures CSS als auch via Javascript. Wie immer, wenn im CSS-Namen ein Bindestrich steht, wird es ein CamelCase (camel case: Weil Javascript keine Bindestriche toleriert, entfallen Bindestriche und der erste Buchstabe nach dem Bindestrich wird groß geschrieben).

Mehr zu Animationen

• SVG Freiform-Pfade (Bezier-Kurven) Pfade mit Kontrollpunkten, mit denen die Krümmung und Richtung der Kurve bis zum nächsten Punkt bestimmt wird
• CSS Keyframes-Animationen Liste von CSS-Eigenschaften, die schrittweise (Frames) mit weichen Übergängen geändert werden
• Javascript Web Animation API Scripting für Animationen: animate (keyframes, options).