test

Demo with multiple images




Staggering the animations can result in a multiple image fader.

This time I’ve created an animation that goes from 0 to 1 opacity, then staggered the animations so only one is visible at once.

Thanks to Pafson’s comment, this is finally working as expected! He proposes the following algorithm to determine the percentages and timings:

For “n” images You must define:
a=presentation time for one image
b=duration for cross fading

Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

  1. 0%
  2. a/t*100%
  3. (a+b)/t*100% = 1/n*100%
  4. 100%-(b/t*100%)
  5. 100%