Web Animations - Bildwechsler arbeitet nicht synchron

[Matthias Scharwies]

Servus!

Ich habe das Problem auch auf Stackoverflow gepostet.

delay and endDelay apply before and after the whole set of iterations. There is no setting for delay between iterations.

Die beiden Eigenschaften delay und endDelay werden nur vor und nach der Animation angewandt. Eine Wiederholung fängt gleich wieder an.

Dass heißt, ich benötige pro Durchlauf andere keyframes, wie hier vorgeschlagen:

var keyframes = [
  { opacity: 0 },
  { opacity: 1, offset: 1 / children.length * 1 / 3 },
  { opacity: 1, offset: 1 / children.length * 2 / 3 },
  { opacity: 0, offset: 1 / children.length },
  { opacity: 0 }
];
for (var index = 0; index <= children.length; index++) {
  children[index].animate(
     keyframes, { 
       duration: aniDur * children.length,
       delay: index * aniDur,
       iterations: Infinity 
     });
}

Da brauch ich mal ein paar Tage Muße, um das in Ruhe auszuprobieren.

Herzliche Grüße

Matthias Scharwies