Web Animations - Bildwechsler arbeitet nicht synchron

[Matthias Scharwies]

Servus!

Ihr habt wsl. schon mitgekriegt, dass ich mich an der neuen Web Animations API probiere.

• JavaScript/Tutorials/Bildwechsler/Animieren_in_JavaScript

Die Funktionsweise ist klar, es läuft ähnlich wie bei CSS. Sobald ich eine Animation aber mehrfach hintereinander aufrufen will, klappt in der Wiederholung die von mir berechnete Taktung nicht mehr.

• Beispiel 1: Fader mit mehreren Bildern

Für einen Bildwechsler sollen die absolut positionierten, übereinander liegenden figure-Elemente der Reihe nach ausgeblendet werden.

Dies funktioniert - sobald ich die Animation aber mehrfach oder mit Infinity auf unendlich laufen lasse, kommt die gesamte Taktung durcheinander.

Ich habe mit alert(gesamt) die jeweilige Summe von delay, duration und endDelay überprüft - immer 12.000. Trotzdem fängt die Animation bei einer Wiederholung immer an zu ruckeln.

Habt ihr irgendeine Idee, was ich machen könnte?

• Beispiel 2: Alternative

Hier habe ich versucht, die Bilder alle auf opacity: 0 zu setzen und in der Animation ein- und später wieder auszublenden. (Leider gibt es da keine Prozentwerte wie in CSS @keyframes, man könnte die Beschleunigungskurve aber mit easing verändern.) Trotzdem gibt es spätestens ab dem dritten Durchlauf nur noch die 2 letzten Bilder.

Die Steuerung mit animation.pause(), bzw. animation.play() funktioniert, umso trauriger, dass ich dass hier nicht hinkriege.

Ich wäre für jedem Lösungsansatz dankbar!

Herzliche Grüße

Matthias Scharwies