Guten Morgen,

Gestern hatten wir viel über unsere Monatsbaustelle Animation(en) diskutiert.

Diese Übersichtsseite zeigt die drei Tutorials zu CSS-Animation
und unter "Siehe auch" weitere Tutorials zum Thema.

Für die mehrstufigen Animationen und die WAAPI suchen wir noch Ideen. Es sollte etwas einfaches sein, das auch einen Bezug zu Web-Entwicklung hat. (Bisher rollen Kugeln oder der Mond rotiert um die Erde. Im nächsten Beispiel kommt dann etwas ganz anderes.)

Da drehen wir uns immer im Kreis:
Warum sollen wir denn eigentlich etwas Vorhandenes neu schreiben?

In Wie sehen gute Tutorials aus? haben wir festgelegt, dass ein Tutorial idealiter auf einem Konzept für eine Webseite beruht, das dann Stück für Stück realisiert wird. Dabei werden die benötigten Eigenschaften erklärt, wie und warum sie eingesetzt wurden. Viele bestehende Tutorials zählen die damit verbundenen Eigenschaften einfach alphabetisch auf und doppeln damit die Referenz.

Animation/mehrstufige Animationen ist in Teilen von 2015 und immer wieder erweitert worden, ohne dass eine konkreter Anwendungsfalll vorgestellt wird.

Wer einen solchen use case für CSS-Animations hat – oder nur eine Idee – immer her damit!

MDN verwendet einfliegenden Text, was ich aus Lesbarkeitsgründen für nicht empfehlenswert halte.

Wichtig: Solange wir keine bessere Idee haben, bleibt das alte inhaltlich nicht falsche Tutorial so stehen.

WAAPI

Dafür ist ein Stammtisch ja da: Wir stellen neue Dinge vor und klopfen sie auf Gebrauchsfähigkeit ab. Dabei gibt es manchmal Missverständnisse, deren Auflösung wir dann aber auch in unsere Neufassung einbringen können.

Web Animations

• sind einerseits die JavaScript-Variante von CSS-Animationen
• bieten Steuerungs-Möglichkeiten mit animate.play(), animate.pause() und .reverse()
• arbeiten aber direkt im Rendering:
  • Wenn man Elemente animiert, z.B Karten beim Austeilen,
    wird die Animation nur genauso oft wie benötigt gezeichnet
  • wenn die Animation pausiert oder der Tab nicht aktiv ist, wird nichts berechnet.

Das ist im Tutorial noch nicht erwähnt. Bei der Animation von HTML- und SVG-Elementen ist ein Einsatz von setInterval, aber auch requestAnimationFramenicht mehr nötig - diese benötigt man dort, wo keine CSS-Eigenschaften verwendet werden:

• Animation des d-Attributs bei Pfaden
• Animation von startOffset bei textPath (siehe unten)
• Zeichnen von Objekten in canvas oder WebGPU.

SMIL

Das war der Weg zu SVG-Animationen seit 2001 - damals konnte man SVG nur mit Batik-Viewer im Browser anschauen. Es ist ein gleichberechtigter XML-Standard, der neben SVG spezifiziert wurde.^[1]

Ja, das wird heute so nicht mehr verwendet - es dient aber, da doch irgendwie Teil von SVG der Komplettierung der SVG-Doku.

Ich wollte ja jemanden bitten, die Animation_von_startOffset in CSS-Animation umzuwandeln - das geht nicht.
Während animationMotion durch offset-path ersetzt wurde, werden bei textPath die Glyphen ja genau entlang des Texts gerendert, dass ist mit CSS nicht möglich.
startOffset ist kein Präsentationsattribut.

Eine Rotation wie im folgenden Beispiel ginge aber mit CSS!

Für Ideen und Anregungen bin ich immer dankbar - wir wollen das auf unserem Stammtisch am 21.01.2026 [aktualisiert!] besprechen und das bis dahin Geschaffte vorstellen.

Herzliche Grüße
Matthias Scharwies