title: Crossfade Keyframe Percentages Algorithm
body: <p>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?</p>
  
  <p><strong>I have 4 images that I'm trying to rotate every 12 seconds, with a 1 second animation.</strong></p>
  
  <blockquote>
    <p>He proposes the following algorithm to determine the percentages and
    timings:</p>
    
    <p>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</p>
    
    <p>animation-delay = t/n or = a+b</p>
    
    <p>Percentage for keyframes:</p>
    
    <ol>
    <li>0% </li>
    <li>a/t*100% </li>
    <li>(a+b)/t*100% = 1/n*100% </li>
    <li>100%-(b/t*100%) </li>
    <li>100%</li>
    </ol>
  </blockquote>
  
  <p>You can find this here:
  <a href="http://css3.bradshawenterprises.com/cfimg/" rel="nofollow">http://css3.bradshawenterprises.com/cfimg/</a></p>
  
  <p>Thank you very much.</p>
  
  <pre><code>@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 }
  }
  </code></pre>
  
  <p>Here is my fiddle:
  <a href="https://jsfiddle.net/joelssk/1jLk06as/4/" rel="nofollow">https://jsfiddle.net/joelssk/1jLk06as/4/</a></p>