# Developers Planet

Joel twoxx February 2016

I found this on a website, but I'm not sure I understand it correctly...Everytime I try it doesn't work out. Can someone elaborate on this for me?

I have 4 images that I'm trying to rotate every 12 seconds, with a 1 second animation.

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%

You can find this here: http://css3.bradshawenterprises.com/cfimg/

Thank you very 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 is my fiddle: https://jsfiddle.net/joelssk/1jLk06as/4/

Vincent van der Weele February 2016

There is nothing magical about the percentages. If you have 4 images that need to rotate, each of them showing 11 seconds before a 1-second transition period, then how does that look?

In the below sketch, `X` is visible, `_` is invisible and `<` and `>` are fade in and fade out, respectively.

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

If we look at the first image, what are the key frames, i.e., when something has to happen? From `0` to `11` the image is visible. From `11` to `12` it's fading out. From `12` to `47` it's invisible. And from `47` to `48` it's fading in.

Your total time is `48` seconds, so these times translate to (on a scale from `0` to `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, it is quite clear that all images follow the same pattern, they only start at different times. As you can see from the diagram, the delays should be `0`, `12`, `24`, and `36` seconds.