Die Web Animations API und SMIL/SVG: unausgereift

Die Web Animations API  (WAAPI) beginnt mit dem Versprechen, existierende Animationsmethoden für die Web-Plattform zu vereinheitlichen:

The Web Animations model is intended to provide the features necessary for expressing CSS Transitions , CSS Animations  and SVG . As such, the use cases of Web Animations model is the union of use cases for those three specifications.

Das Model der Web Animations soll die notwendigen Funktionen bereitstellen, um CSS Transitions, CSS Animations und SVG zu beschreiben. Insofern sind die Anwendungsfälle des Models der Web Animations die Vereinigungsmenge dieser drei Spezifikationen.

Eine der coolen Möglichkeiten der deklarativen SMIL-Animationen, in ihrer Fassung als Teil von SVG 1.1, ist die Möglichkeit, nicht nur CSS-Eigenschaften zu animieren, sondern auch Attribute. Ja, diese Unterscheidung ist ein wenig unscharf. Viele CSS-Eigenschaften können auch als „Präsentations-Attribute“ ausgedrückt werden:

<circle r="10" style="fill:red" />

ist genau dasselbe wie

<circle r="10" fill="red" />

Aber es gibt auch eine Reihe von Attributen, die nicht als Eigenschaften geschrieben werden können, wie zum Beispiel der Radius r in dem obigen Beispiel. (Version 2 der SVG-Spezifikation sagt das Gegenteil, aber bisher wird das von Browsern nicht implementiert.)

Die existierenden Implentierungen von SMIL in aktuellen Browsern können mit solchen Attributen problemlos umgehen. Das folgende Beispiel zeigt beide Varianten: die stroke-Farbe des Pfades verändert sich über die Zeit, wobei genau dieselbe Syntax zum Einsatz kommt wie für das d-Attribut, für das es kein CSS-Equivalent gibt.

See the Pen SMIL attribute animation by ccprog (@ccprog) on CodePen.

Angesichts des oben gemachten Versprechens hätte ich erwartet, dass ich die Animation auch einfach mit der WAAPI schreiben kann:

See the Pen WAAPI attribute animation - not working yet by ccprog (@ccprog) on CodePen.

Diese Erwartung wurde enttäuscht. Während die Farbänderung beweist, dass es für CSS-Eigenschaften funktioniert, implementiert kein Browser die Animation von Attributen.

Auf der Suche nach dem Grund habe ich die Spezifikation genauer angeschaut und musste feststellen, dass nicht einmal die bisher darauf ausgerichtet ist, irgendetwas anderes als CSS zu animieren. Ich habe sogar vor ein paar Tagen einen Vorgang  dazu bei der CSSWG eingereicht. Ohne zu tief einzusteigen, war es folgendes Detail, dass mich stutzen ließ:

Das Keyframe-Format, dass von der WAAPI eingesetzt wird, ist ein einfaches Objekt, mit der Eigenschaft als Schlüssel-Wert-Paar, ergänzt durch den Zeitpunkt im Durchlauf unter dem Namen offset:

{ stroke: 'blue', offset: 0.5 }

Unglücklicherweise gibt es auch eine CSS-Eigenschaft mit diesem Namen, genau wie ein SVG-Attribut (für die Position einer Knotenfarbe innerhalb eines Farbverlaufs). Wie soll das dargestellt werden? Für den CSS-Fall hält die Spezifikation einen Patch  bereit:

{ cssOffset: 'auto', offset: 0.5 }

Das Ganze ist etwas obskur, denn diese Eigenschaft wird für Bewegungen entlang eines Pfades gebraucht. Was also soll hier ausgedrückt werden? Soll der Pfad animiert werden, entlang dessen ein Objekt in einer Animation bewegt wird? Wie auch immer, dieser Sonderfall wird beschrieben. Aber was ist mit dem Attribut? cssOffset ist dafür offensichtlich kein geeigneter Name.

Die Autoren der Spezifikation habe offensichtlich nicht über den CSS-Horizont hinaus gedacht. Und die Browser-Hersteller haben sich auch noch nicht mit Attribut-Animationen beschäftigt – sonst wäre ihnen dasselbe aufgefallsen wie mir.