CSS offset-path: Animation entlang eines Pfades

CSS animation motion path

CSS offset-path bewegt Elemente entlang einer S-Kurve, einer Acht und schießt kleine Raketen in den Orbit. Damit wollen die Blink-Entwickler (Chrome und Opera) CSS Transition und Animationen bereichern, nachdem sie SVG SMIL-Animationen ins Abseits gesetzt haben.

18-12-15 SITEMAP

offset-path

CSS kannte lange Zeit keine Animation entlang eines Pfades: Das gibt es erst mit offset-path (zuvor Motion Path).

Das Web Animation API (WAAPI) steht als umfassende Schnittstelle für Animationen auf der Schwelle. Den ersten Vorgeschmack lieferten Chrome und Opera, die das CSS Motion Path Modul aus dem Web Animation API umgesetzt haben.

Animationen sind ein bewegtes Thema. CSS-Animationen haben im Handumdrehen Karriere gemacht, Javascript-Libraries wie VelocityJs und GreenSock treten die Nachfolge von ActionScript an.
Aber wir haben immer noch nichts, was so handlich wie einst die GIF-Animationen wäre: Alles in einer Datei, alles ohne Libraries und ohne Javascript, ein in ein omg-Tag und ab die Post.

Das hätte mit SVG und SMIL funktioniert, aber Blink (Chrome, Opera) und Microsoft haben schnell einen Riegel vorgesetzt als SVG sich endlich entfalten konnte. Funktionsweise und Syntax von SMIL liegen abseits von CSS-Animationen und der große Erfolg der CSS-Animationen rührt nicht zuletzt in ihrer konsistenten und gut verständlichen Syntax.

SVG SMIL-Animationen wurden von den Blink-Entwicklern 2015 als unerwünschte und veraltete Technik verdammt, aber die Ankündigung wurde nicht dauerhaft umgesetzt, dann zurückgezogen. 2017 liefen SMIL-Animationen auch wieder in Chrome, in EDGE ebenfalls, seit sich Microsoft an Blink angeschlossen hat. Internet Explorer ist weg vom Fenster. Ob sich jetzt wieder ein Einarbeiten in SMIL lohnt? Meine Glaskugel hüllt sich in Nebel.

Offset-Path-Animationen

Alle SVG-Attribute, die in einem style-Attribut wirken, können heute per CSS animiert werden. Die Animation von Elementen entlang eines Pfades fehlte im CSS-Animations-Angebot für eine lange Zeit.

Motion Path Acht für einen Flieger
Kein Support für offset-path (alte Syntax: motion-path). Versuchs mit Chrome oder Opera!

Der grüne Flieger ist ein PNG-Bild, also ein HTML-Element – kein SVG. CSS offset-path animiert sowohl SVG- als auch HTML-Elemente mit der bekannten CSS-Syntax für Animationen.

aero {
 offset-path: path('m 138.6,161.9 c 5.7,5.7 -4.9,10.4 -9.5,9.4 -12.3,-2.8 -14.3,-18.7 -9.3,-28.3 9,-17.2 32.1,-19.1 47.2,-9.2 22,14.4 23.9,45.6 9.1,65.9 -19.8,27.1 -59.3,29 -84.77,9.1 C 59.27,183.7 57.37,135.8 82.38,105.2 112.6,68 169,66.1 204.8,96.2 c 42.1,35.5 44,100.4 8.8,141.3 C 172.9,285 99.64,286.5 53.57,246.2 1.203,200.4 -0.5627,118.6 44.87,67.3 95.88,9.8 186.2,8.1 242.5,58.7 305.1,115 306.8,213.9 251,275.3');
    animation: acht 10s;
 }
 @keyframes acht {
    0% { offset-distance: 0;}
    100% { offset-distance: 100%;}
 }
offset (alte Syntax: motion)
shorthand / Kurzschrift
offset-path (alte Syntax: motion-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 (alte Syntax: motion-offset)
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 (alte Syntax: motion-rotation)
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

Offset Path in SVG

Zu den schönen Seiten von offset-path gehört, dass wir ein Bild (wie einst ein GIF oder ein SVG mit SMIL) in einem img-Tag animieren können, ohne CSS- oder Javascript-Dateien mit Einzelteilen zu belasten. Alles schon drin …

CSS motion path nur Chrome, Opera, nicht safari,  firefox

Dieie Ballons schweben nur für Chrome und Opera, in Firefox und seit dem Umstieg von EDGE auf die Blink-Engine. Für den Rest – Safari und IE – gibt es im Anschluss ein Trostplaster.

c1 {
 offset-path: path( 'M 1169,756 C 2281,362 271,20 229,616 214,1080 56,1151 1169,757 z');
    offset-rotate: 0deg;
    animation: floating 40s infinite linear;
 }
 @keyframes floating {
    0% { offset-distance: 0%;}
    100% { offset-distance: 100%;}
 }

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:

SMIL Animation - still working in all modern browsers
<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).

Pfad-Animation mit getPointAtLength und getTotalLength

Jetzt sitzt ja nicht jede Animation in einem SVG-Bild, so dass SMIL zum Einsatz kommen kann. Dann bleibt Safari also bei der Animation entlang eines Pfads außen vor. Es gibt ein Trostpflaster für Safari: Zwei Javascript-Methoden des Pfades steuern die Animation entlang eines Pfads.

  • getTotalLength gibt die Länge des Pfades zurück.
  • getPointAtLength gibt die x-y-Position eines Punktes auf dem Pfad zurück.
(function() {
 var p = document.createElementNS('http://www.w3.org/2000/svg','path');
 p.setAttribute('d','M 746.1,57.41 C 637.5,248.8 115.7,-87.43 229.9,343.9');
 var ff = document.getElementById('ff');
 var head = document.getElementById('head');
 head.setAttribute('transform','translate(140,220) rotate(0)');
 var len = p.getTotalLength();
 var ic = 0;
 var repeater;
 var open = 0;
 function swallow () {
    var pct = ic / 250;
    var pt = p.getPointAtLength(pct * len);
    ff.setAttribute('transform','translate(' + pt.x + ',' + pt.y + ') rotate(' + ic + ')');
    if (ic > 50 && ic < 130) {
       head.setAttribute('transform','translate(140,220) rotate(' + open + ')');
       open = open - 1;
    }
    if (ic > 210) {
       head.setAttribute('transform','translate(140,220) rotate(' + open + ')');
       open = open + 2;
    }
    ic++;
    if (ic > 250) {
       ic = 0;
       open = 0;
    }
    repeater = requestAnimationFrame(swallow);
 }
 swallow();
 } () );

Animationen mit getTotalLength und getPointAtLength funktionieren in allen Browsern, die SVG unterstützen – lt. Microsoft selbst in IE9. Sie animieren nicht nur SVG, sondern auch HTML-Elemente wie Bilder und Text. Allerdings gibt getPointAtLength nur das her, was der Name besagt: einen Punkt im Koordinatensystem. Die Richtung fehlt – also keine einfache Anpassung der Ausrichtung.

2019-11-16 SITEMAP BLOG