SELF-Wiki: Animation

[Matthias Scharwies]

Guten Morgen,

Animation(en) sind unsere aktuelle Baustelle!

• Animation/Übergänge
  Zustände bei Links, Buttons und später Bilder anschaulich machen;
  die ersten vier Beispiele sind überarbeitet
• Animation/Pfad-Animationen
  Thema ist ein Flugzeug, das einem Pfad folgt.
  Weitere (Ideen für ) Beispiele aus der Praxis sind willkommen!

sind als Zwischenstand schon mal online.

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.)

Für Ideen und Anregungen bin ich immer dankbar - wir wollen das auf unserem Stammtisch am 07.01.2026 besprechen und dann evtl. Aufgaben verteilen.

Herzliche Grüße, frohe Weihnachten und einen guten Rutsch!
Matthias Scharwies

[Matthias Scharwies]

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

---

1. Der von mir kurz erwähnte und [dort] in den Fußnoten verlinkte Artikel von Henk Strobel verwendet das switch-Element, das es auch in SVG gibt, das ich allerdings auch noch nie verwendet habe. ↩︎

[MudGuard]

Hi,

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

ganz klar - der Blick aus dem Fenster sagt es auch - Schneeflocken, die über die Seite rieseln!!! 😉

cu,
Andreas a/k/a MudGuard

[Matthias Scharwies]

Servus!

Hi,

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

ganz klar - der Blick aus dem Fenster sagt es auch - Schneeflocken, die über die Seite rieseln!!! 😉

Nur wenn man sie mit einem Button und snowfall.reverse() ohne Streusalz wegzaubern kann!

Herzliche Grüße
Matthias Scharwies

PS: Bei uns gibt es Diskussionen, ob bei uns morgen die Schule ausfällt. Eigentlich ist der Sturm 600km nördlich - bei uns soll es „nur“ Glatteis geben.
Wahrscheinlich kommen morgen nur die Lehrer und die Schüler berufen sich darauf, dass jemand doch gesagt hätte …

[Rolf B]

Hallo Matthias,

ich hatte heute eine Tel-Co mit einem Kollegen aus Hamburg, der meinte, ihnen friert gerade die Alster zu… Hier im Raum Köln regnet es bei 1 Grad und die Weiße Scheiße™ ist weg.

Kai Zorn sagt bei euch aber bis morgen früh schon etwas Neuschnee an. Köln ist natürlich wieder komplett grün 😕

Glatteis und überfrierende Nässe find ich allerdings noch gefährlicher als soliden Schnee…

Rolf

[Ryuno-Ki]

Moin MudGuard,

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

ganz klar - der Blick aus dem Fenster sagt es auch -

animierte Handschrift!

Wie auf diesen Schiefertafeln von anno dazumal.

Gruß,

[Matthias Scharwies]

Servus!

Moin MudGuard,

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

ganz klar - der Blick aus dem Fenster sagt es auch -

animierte Handschrift!

Wie auf diesen Schiefertafeln von anno dazumal.

Danke! Das haben wir schon:

• SVG/Tutorials/Text/Schrift von Zauberhand

Es ist auch auf der Animation-Portalseite gelistet - anders als das "SVG mit CSS Stylen"-Tutorial, das ich vergessen hatte.

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@MudGuard

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

ganz klar - der Blick aus dem Fenster sagt es auch - Schneeflocken, die über die Seite rieseln!!! 😉

Kannst du das mal bitte dem Macher der CSSBattle sagen? Der hat dafür vermutlich irgendein fettes JavaScript eingebaut. Nach kurzer Zeit geht der Lüfter an. Und dann dauert’s auch nicht mehr lange, bis er wieder ausgeht – zusammen mit dem ganzen System, weil der Akku leergesaugt ist.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar Bittersmann,

Der hat dafür vermutlich irgendein fettes JavaScript eingebaut.

Der malt auf einem seitenüberdeckenden <canvas> rum. Wie er es tut, ist mir nicht ganz ersichtlich, aber ich befürchte, wenn man das mit SVG animieren würde, müsste der alte Carl Friedrich auch ganz ordentlich rechnen.

Rolf

[JürgenB]

Hallo,

Für die mehrstufigen Animationen (und die WAAPI) suchen wir noch Ideen.

Meine Idee: Konstruktion eines rechtwinkligen Dreiecks nach 3-4-5-Regel.

• Drei Linien der Länge 3, 4, 5 (30em , 40em, 50em) fliegen ein
• Die kürzeren Linien fliegen zu den Enden der langen Linie und richten sich auf
• Die kürzeste Linie dreht sich um den unteren Punkt hin und her, dann wird an deren Ende ein Kreissegment mit Radius 3 (30em) eingeblendet
• Gleiches für die zweitlängste Linie
• Beide Linien werden zu dem Schnittpunkt der beiden Kreise gedreht
• Die Kreissegmente werden ausgeblendet

Wäre das was?

Gruß
Jürgen

[Matthias Scharwies]

Servus!

Hallo,

Für die mehrstufigen Animationen (und die WAAPI) suchen wir noch Ideen.

Meine Idee: Konstruktion eines rechtwinkligen Dreiecks nach 3-4-5-Regel.

Danke, klingt interessant!

• Drei Linien der Länge 3, 4, 5 (30em , 40em, 50em) fliegen ein
• Die kürzeren Linien fliegen zu den Enden der langen Linie und richten sich auf
• Die kürzeste Linie dreht sich um den unteren Punkt hin und her, dann wird an deren Ende ein Kreissegment mit Radius 3 (30em) eingeblendet
• Gleiches für die zweitlängste Linie
• Beide Linien werden zu dem Schnittpunkt der beiden Kreise gedreht
• Die Kreissegmente werden ausgeblendet

Wäre das was?

Ich probiere das am Wochenende mal aus und zeig's euch dann.
Dann kann man es evtl. in Schritte zerlegen.

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@JürgenB

Für die mehrstufigen Animationen (und die WAAPI) suchen wir noch Ideen.

Meine Idee: Konstruktion eines rechtwinkligen Dreiecks nach 3-4-5-Regel.

Hm, wenn Pythagoras, wie wär’s denn damit?^[1] Muss nicht blubbern. Aber die Wasserspiegel sollten schon horizontal sein. Wenn man aufhört am Rad zu drehen, wird die Animation je nach Drehwinkel und Füllstand der drei Kammern berechnet und gestartet.

🖖 Live long and prosper

---

1. So’n Ding hatten wir im Seminargebäude der Informatik an der TU Berlin damals auch beim Eingang an der Wand hängen. ↩︎

[Bertie]

Salü Jürgen

Deine Idee gefällt mir gut!

Ich habe damit einen Artikel skizziert, mit dem man vielleicht gleich noch verschiedene Animationsmethoden mit Deinem Beispiel anschaulich gegenüberstellen könnte:

https://wiki.selfhtml.org/wiki/Benutzer:Bertie/Vergleich_Animationsmethoden

Allerdings ist mir noch nicht klar, wo dieser Artikel hinein passen könnte.

Gruss, Bertie

P.S. Wie üblich wenn ich als Schweizer etwas im Wiki schreibe muss ich am Ende noch eine Rechtschreibkontrolle für Deutschland durchführen, von wegen Eurem «ß» und so.

[Rolf B]

Hallo Bertie,

wäre es nicht besser, wenn die Animation den Satz beweist?

Statische und GIF-animierte Beispiele gibt es hier:
https://de.wikipedia.org/wiki/Satz_des_Pythagoras#Beweise

Rolf

[JürgenB]

Hallo Rolf,

wäre es nicht besser, wenn die Animation den Satz beweist?

bei meiner Idee ging es mir nicht um den Beweis, sondern um die Konstruktion eines rechten Winkels nach der 3 - 4 - 5 Regel. Angewendet habe ich sie im Garten, wo ich kein Geodreieck mit 3m Kantenlänge hatte, und auf der Baustelle, wo ich den rechten Winkel beim Zuschnitt eines breiten Bretts nicht von einem 30cm-Winkel abhängig machen wollte.

Außerdem ist das Thema ja nicht Geometrie, sondern Animation.

Gruß
Jürgen

[JürgenB]

Hallo Bertie

Deine Idee gefällt mir gut!

und mir gefällt deine Umsetzung.

Gruß
Jürgen

[Bertie]

Salü zusammen

Nach Besprechung am gestrigen Stammtisch habe ich diesen Artikel nun überarbeitet und als Anhang eingebaut auf der Seite «SVG mit CSS animieren»:

Einstieg_in_SVG/SVG_mit_CSS_animieren

Gruss, Bertie

[Matthias Scharwies]

Servus!

Einstieg_in_SVG/SVG_mit_CSS_animieren

Vielen Dank!

Jetzt brauche ich nur noch einen großen Garten, um das einmal in echt auszuprobieren! 😀

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Bertie

Einstieg_in_SVG/SVG_mit_CSS_animieren

Was man da noch erwähnen könnte (sollte?): Dass Animationen nicht nur in der Zeit ablaufen, sondern auch scroll-driven sein können. Gerade in der Verbindung mit SVG ergeben sich da Möglichkeiten: TIL about scroll-driven animations

🖖 Live long and prosper

[Matthias Scharwies]

Servus!

@@Bertie

Einstieg_in_SVG/SVG_mit_CSS_animieren

Was man da noch erwähnen könnte (sollte?): Dass Animationen nicht nur in der Zeit ablaufen, sondern auch scroll-driven sein können.

Das kommt in den noch zu überarbeitenden Teil „mehrstufige Animationen“, der bis jetzt eine Eigenschaft nach der anderen abarbeitet und so der Referenz ähnelt.

Hoffentlich komme ich bis Sonntag dazu.

Gerade in der Verbindung mit SVG ergeben sich da Möglichkeiten: TIL about scroll-driven animations

Sieht cool aus (im Chrome), in meinem Browser sieht man (noch) nichts. 😀

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Sieht cool aus (im Chrome), in meinem Browser sieht man (noch) nichts. 😀

Im meinem (Firefox) schon lange. So lange, dass es fast schon in Vergessenheit geraten ist, dass das immer noch hinter dem Feature-Flag layout.css.scroll-driven-animations.enabled versteckt ist.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Bertie

Einstieg_in_SVG/SVG_mit_CSS_animieren

Das erste Beispiel ist leider nicht gut. Da wird width animiert, was man wegen Performanz nicht tun sollte, siehe [MDN].

Das sollte umgebaut werden auf die Animation von transform: scaleX() bzw. scale.

Man könnte generell in Erwägung ziehen, statt transform die CSS-Eigenschaften translate, rotateundscale` zu verwenden, aber das soll hier kein Kritikpunkt sein.

Weiter unten sind zwei Rotationen hintereinander. Dient das didaktischen Zwecken? Warum sind die nicht zu einer zusammengefasst?

🖖 Live long and prosper

[Bertie]

Salü Gunnar

Danke, das erste Beispiel habe ich auf transform: scaleX() umgebaut, das ist wirklich sinnvoller.

Unten wie Du schreibst 2 Rotationen zu «didaktischen Zwecken», habe ich so erklärt:

In CSS und WAAPI werden hier für bessere Les- und Wartbarkeit jeweils zwei separate Rotations-Angaben geschrieben (man könnte diese 2 Werte auch summieren und nur je 1 Wert angeben).

Gruss, Bertie

[MudGuard]

Hi,

Das erste Beispiel ist leider nicht gut. Da wird width animiert, was man wegen Performanz nicht tun sollte

Das sollte umgebaut werden auf die Animation von transform: scaleX() bzw. scale.

bei einem inhaltsleeren Balken dürfte das von der Optik keinen Unterschied machen. Aber wenn Text drin ist, würde ich bei scaleX erwarten, daß bei Werten kleiner 1 die Schrift zusammengedrückt und bei Werten > 1 die Schrift in die Breite gezogen wird.

cu,
Andreas a/k/a MudGuard