title: How can I convert this CSS3 animation into a Sass mixin?
body: <p>I have the following animation code...</p>
  
  <pre><code>.a {
      background: url(../Images/experience-1.jpg) center center no-repeat red;
      z-index: 7;
  
      -webkit-animation-delay: 3s;
      -webkit-animation-duration: 5s;
      -webkit-animation-name: fadeout;
      -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      -moz-animation-delay: 3s;
      -moz-animation-duration: 5s;
      -moz-animation-name: fadeout;
      -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      -o-animation-delay: 3s;
      -o-animation-duration: 5s;
      -o-animation-name: fadeout;
      -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      animation-delay: 3s;
      animation-duration: 5s;
      animation-name: fadeout;
      animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  }
  
  .b {
      background: url(../Images/experience-2.jpg) center center no-repeat yellow;
      z-index: 6;
  
      -webkit-animation-delay: 18s;
      -webkit-animation-duration: 5s;
      -webkit-animation-name: fadeout;
      -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      -moz-animation-delay: 18s;
      -moz-animation-duration: 5s;
      -moz-animation-name: fadeout;
      -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      -o-animation-delay: 18s;
      -o-animation-duration: 5s;
      -o-animation-name: fadeout;
      -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      animation-delay: 18s;
      animation-duration: 5s;
      animation-name: fadeout;
      animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  }
  
  .c {
      background: url(../Images/experience-3.jpg) center center no-repeat pink;
      z-index: 5;
  
      -webkit-animation-delay: 33s;
      -webkit-animation-duration: 5s;
      -webkit-animation-name: fadeout;
      -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      -moz-animation-delay: 33s;
      -moz-animation-duration: 5s;
      -moz-animation-name: fadeout;
      -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      -o-animation-delay: 33s;
      -o-animation-duration: 5s;
      -o-animation-name: fadeout;
      -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      animation-delay: 33s;
      animation-duration: 5s;
      animation-name: fadeout;
      animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  }
  
  .d {
      background: url(../Images/experience-4.jpg) center center no-repeat green;
      z-index: 4;
  
      -webkit-animation-delay: 48s;
      -webkit-animation-duration: 5s;
      -webkit-animation-name: fadeout;
      -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      -moz-animation-delay: 48s;
      -moz-animation-duration: 5s;
      -moz-animation-name: fadeout;
      -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      -o-animation-delay: 48s;
      -o-animation-duration: 5s;
      -o-animation-name: fadeout;
      -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      animation-delay: 48s;
      animation-duration: 5s;
      animation-name: fadeout;
      animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  }
  
  .e {
      background: url(../Images/experience-5.jpg) center center no-repeat orange;
      z-index: 3;
  
      -webkit-animation-delay: 63s;
      -webkit-animation-duration: 5s;
      -webkit-animation-name: fadeout;
      -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      -moz-animation-delay: 63s;
      -moz-animation-duration: 5s;
      -moz-animation-name: fadeout;
      -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      -o-animation-delay: 63s;
      -o-animation-duration: 5s;
      -o-animation-name: fadeout;
      -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      animation-delay: 63s;
      animation-duration: 5s;
      animation-name: fadeout;
      animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  }
  
  .f {
      background: url(../Images/experience-6.jpg) center center no-repeat purple;
      z-index: 2;
  
      -webkit-animation-delay: 78s;
      -webkit-animation-duration: 5s;
      -webkit-animation-name: fadeout;
      -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      -moz-animation-delay: 78s;
      -moz-animation-duration: 5s;
      -moz-animation-name: fadeout;
      -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      -o-animation-delay: 78s;
      -o-animation-duration: 5s;
      -o-animation-name: fadeout;
      -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  
      animation-delay: 78s;
      animation-duration: 5s;
      animation-name: fadeout;
      animation-fill-mode: forwards; /* this prevents the animation from restarting! */
  }
  </code></pre>
  
  <p>...and what I want to do is to make it easier in future to change the values.</p>
  
  <p>Just to explain that each class is applied to a <code>div</code> with a background image and each <code>div</code> is absolutely positioned on top of each other. So fading out the top <code>div</code> will show the other <code>div</code> below it.</p>
  
  <p>The initial animation delay is 3 seconds and then the duration for each <code>div</code> is always 5 seconds.</p>
  
  <p>But for each class I'm delaying the animation by the same amount of time it takes the previous animation to finish.</p>
  
  <p>So the .b{} class is set to delay by 18 seconds. The way this is worked out is: the first animation has a 3 second delay + 5 second duration, which equals 8 seconds in total + 10 seconds extra for the user to properly see the next image.</p>
  
  <p>So the c.{} class is set to delay by 33 seconds. And again the algorithm is: the second animation has a 18 second delay + 5 second duration, which equals 23 seconds in total + 10 seconds extra for the user to properly see the next image.</p>
  
  <p>So this is the premise of the animation and I need to work out how to automate this via Sass (in case the client says "you know what, I want the duration to be 10 seconds now").</p>
  
  <p>Thanks in advance for any help you can give me.</p>