Joel twoxx February 2016

Crossfade Keyframe Percentages Algorithm

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/

Answers


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.

Post Status

Asked in February 2016
Viewed 3,985 times
Voted 6
Answered 1 times

Search




Leave an answer