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. ↩︎