html - Crossfade Keyframe Percentages Algorithm -

i found on website, i'm not sure understand correctly...everytime try doesn't work out. can elaborate on me?

i have 4 images i'm trying rotate every 12 seconds, 1 second animation.

he proposes following algorithm determine percentages , timings:

for "n" images must define: a=presentation time 1 image b=duration cross fading total animation-duration of course t=(a+b)*n

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

percentage keyframes:

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

you can find here: http://css3.bradshawenterprises.com/cfimg/

thank much.

@keyframes imageanimation {   0% { opacity: 1;   animation-timing-function: ease; }   23% { opacity: 0;   animation-timing-function: ease; }   25% { opacity: 0;   animation-timing-function: ease; }   33% { opacity: 0;   animation-timing-function: ease; }   100% { opacity: 1 } } 

here fiddle: https://jsfiddle.net/joelssk/1jlk06as/4/

there nothing magical percentages. if have 4 images need rotate, each of them showing 11 seconds before 1-second transition period, how look?

in below sketch, x visible, _ invisible , < , > fade in , fade out, respectively.

time  0           12          24          36 img1  xxxxxxxxxxx>___________________________________< img2  ___________<xxxxxxxxxxx>________________________ img3  _______________________<xxxxxxxxxxx>____________ img4  ___________________________________<xxxxxxxxxxx> 

if @ first image, key frames, i.e., when has happen? 0 11 image visible. 11 12 it's fading out. 12 47 it's invisible. , 47 48 it's fading in.

your total time 48 seconds, these times translate (on scale 0 100):

• [0, 23]: visible
• [23, 25]: fade out
• [25, 98]: invisible
• [98, 100]: fade in

or, in terms of keyframes:

@keyframes imageanimation {   0% { opacity: 1; animation-timing-function: ease; }   23% { opacity: 1; animation-timing-function: ease; }   25% { opacity: 0; animation-timing-function: ease; }   98% { opacity: 0; animation-timing-function: ease; }   100% { opacity: 1 } } 

---

now, quite clear images follow same pattern, start @ different times. can see diagram, delays should 0, 12, 24, , 36 seconds.