molily: move.js - "kleine JS Bibliothek" für CSS3 Animantionen

Beitrag lesen

Hallo,

Auch etwas, was setTimeout() ersetzen kann, ist mir bei CSS unbekannt.

transition-delay; @keyframes

Für einfache Animationen reichen transition bzw. @keyframes natürlich aus, dazu bedarf es keine Extrascripte, höchstens um eine Klasse zu umzuschalten.

Um komplexere Animationen zu schreiben, sind CSS Animations jedoch eine denkbar schlechte Sprache. Das kann man machen, aber verständlich, übersichtlich und wartbar ist der entstehende Code nicht. JavaScripte ermöglichen eine beliebige deklarative Syntax, die ohne Gerechne mit transition-delay auskommt. Das fragliche Script hat zumindest then() zur Verkettung, mit anderen lassen sich ganze Szenen, Hooks und Transitions definieren. Z.B. das Script hinter https://www.apple.com/de/mac-pro/.

Nicht-triviale Animationen kann man nicht von Hand verwalten, dafür werden entweder JavaScript-Frameworks oder Authoring-Tools wie Sencha Animator und Adobe Edge Animate verwendet. Letztere haben ein Interface wie Flash und erzeugen ein Gemisch aus @keyframes und JavaScript-Logik, welche CSS-Transitions und -Animationen triggert.

Grüße,
Mathias