Guten Morgen, > Gestern hatten wir viel über unsere Monatsbaustelle [**Animation**(en)](https://wiki.selfhtml.org/wiki/Animation) 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?**](https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Artikel#Wie_sehen_gute_Tutorials_aus.3F) 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**](https://wiki.selfhtml.org/wiki/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](https://developer.mozilla.org/de/docs/Web/CSS/Guides/Animations/Using), 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**](https://wiki.selfhtml.org/wiki/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 `requestAnimationFrame`nicht 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**](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Text/animierte_Textpfade#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! [^1]: Der von mir kurz erwähnte und [dort] in den Fußnoten verlinkte Artikel von Henk Strobel verwendet das [switch-Element](https://wiki.selfhtml.org/wiki/SVG/Element/switch), das es auch in SVG gibt, das ich allerdings auch noch nie verwendet habe. > Für Ideen und Anregungen bin ich immer dankbar - wir wollen das auf unserem [Stammtisch](https://forum.selfhtml.org/self/2025/nov/03/stammtisch-am-mittwoch/1822671#m1822671) am **21.01.2026** [aktualisiert!] besprechen und das bis dahin Geschaffte vorstellen. Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

Guten Morgen, > Gestern hatten wir viel über unsere Monatsbaustelle [**Animation**(en)](https://wiki.selfhtml.org/wiki/Animation) 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?**](https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Artikel#Wie_sehen_gute_Tutorials_aus.3F) haben wir festgelegt, dass ein Tutorial *idealiter* auf einem Konzept für eine Webseite beruht, dass 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**](https://wiki.selfhtml.org/wiki/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](https://developer.mozilla.org/de/docs/Web/CSS/Guides/Animations/Using), 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**](https://wiki.selfhtml.org/wiki/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 `requestAnimationFrame`nicht 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**](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Text/animierte_Textpfade#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! [^1]: Der von mir kurz erwähnte und [dort] in den Fußnoten verlinkte Artikel von Henk Strobel verwendet das [switch-Element](https://wiki.selfhtml.org/wiki/SVG/Element/switch), dass es auch in SVG gibt, dass ich allerdings auch noch nie verwendet habe. > Für Ideen und Anregungen bin ich immer dankbar - wir wollen das auf unserem [Stammtisch](https://forum.selfhtml.org/self/2025/nov/03/stammtisch-am-mittwoch/1822671#m1822671) am **21.01.2026** [aktualisiert!] besprechen und das bis dahin Geschaffte vorstellen. Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

Guten Morgen, > Gestern hatten wir viel über unsere Monatsbaustelle [**Animation**(en)](https://wiki.selfhtml.org/wiki/Animation) 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 wir denn eigentlich etwas neu schreiben sollen? In [**Wie sehen gute Tutorials aus?**](https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Artikel#Wie_sehen_gute_Tutorials_aus.3F) haben wir festgelegt, dass ein Tutorial *idealiter* auf einem Konzept für eine Webseite beruht, dass 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**](https://wiki.selfhtml.org/wiki/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](https://developer.mozilla.org/de/docs/Web/CSS/Guides/Animations/Using), 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**](https://wiki.selfhtml.org/wiki/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 `requestAnimationFrame`nicht 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**](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Text/animierte_Textpfade#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! [^1]: Der von mir kurz erwähnte und [dort] in den Fußnoten verlinkte Artikel von Henk Strobel verwendet das [switch-Element](https://wiki.selfhtml.org/wiki/SVG/Element/switch), dass es auch in SVG gibt, dass ich allerdings auch noch nie verwendet habe. > Für Ideen und Anregungen bin ich immer dankbar - wir wollen das auf unserem [Stammtisch](https://forum.selfhtml.org/self/2025/nov/03/stammtisch-am-mittwoch/1822671#m1822671) am **21.01.2026** [aktualisiert!] besprechen und das bis dahin Geschaffte vorstellen. Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)