title: CSS Animations with Chrome and Firefox
body: <p>I am trying to get a little slide show going on a landing page.  It works fine in Firefox, but not in Chrome.
  <a href="http://certs.vwsvandalia.com/test/html/test.html" rel="nofollow">Example Page</a>
  Here is my CSS</p>
  
  <pre><code>/*
      ********* The Slide Show.  Weeeeeee! *********
  */
  
  /* SLIDER STRUCTURE */
  
  #slider {
     background: #000;
     border: 5px solid #eaeaea;
     box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
     height: 320px;
     width: 680px;
     margin: 40px auto 0;
     overflow: visible;
     position: relative;
  }
  
  /* HIDE ALL OUTSIDE OF THE SLIDER */
  
  #mask {
     overflow: hidden;
     height: 320px; 
  }
  
  /* IMAGE LIST */
  
  #slider ul {
     margin: 0;
     padding: 0;
     position: relative;
  }
  
  #slider li { 
     width: 680px;  /* Width Image */
     height: 320px; /* Height Image */
     position: absolute;
     top: -325px; /* Original Position - Outside of the Slider */
     list-style: none;
  }
  
  #slider li.firstanimation {
     animation: cycle 25s linear infinite;
     -webkit-animation: cycle 25s linear infinite;   
  }
  
  #slider li.secondanimation {
     animation: cycletwo 25s linear infinite;
     -webkit-animation: cycle 25s linear infinite;
  }
  
  #slider li.thirdanimation {
     animation: cyclethree 25s linear infinite;
     -webkit-animation: cycle 25s linear infinite;       
  }
  
  #slider li.fourthanimation {
     animation: cyclefour 25s linear infinite;
     -webkit-animation: cycle 25s linear infinite;        
  }
  
  #slider li.fifthanimation {
     animation: cyclefive 25s linear infinite;
     -webkit-animation: cycle 25s linear infinite;        
  }
  
  /* ANIMATION */
  
  @keyframes cycle {
     0%  { top: 0px; } /* When you start the slide, the first image is already visible */
     4%  { top: 0px; } /* Original Position */
     16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
     20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
     21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
     92% { top: -325px; opacity: 0; z-index: 0; }
     96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
     100%{ top: 0px; opacity: 1; }
  }
  
  @keyframes cycletwo {
     0%  { top: -325px; opacity: 0; } /* Original Position */
     16% { top: -325px; opacity: 0; }/* Starts moving after 16% to this position */
     20% { top: 0px; opacity: 1; }
     24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
     36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
     40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
     41% { top: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
     100%{ top: -325px; opacity: 0; z-index: -1; }
  }
  
  @keyframes cyclethree {
     0%  { top: -325px; opacity: 0; }
     36% { top: -325px; opacity: 0; }
     40% { top: 0px; opacity: 1; }
     44% { top: 0px; opacity: 1; } 
     56% { top: 0px; opacity: 1; } 
     60% { top: 325px; opacity: 0; z-index: 0; }
     61% { top: -325px; opacity: 0; z-index: -1; } 
     100%{ top: -325px; opacity: 0; z-index: -1; }
  }
  
  @keyframes cyclefour {
     0%  { top: -325px; opacity: 0; }
     56% { top: -325px; opacity: 0; }
     60% { top: 0px; opacity: 1; }
     64% { top: 0px; opacity: 1; }
     76% { top: 0px; opacity: 1; z-index: 0; }
     80% { top: 325px; opacity: 0; z-index: 0; }
     81% { top: -325px; opacity: 0; z-index: -1; }
     100%{ top: -325px; opacity: 0; z-index: -1; }
  }
  
  @keyframes cyclefive {
     0%  { top: -325px; opacity: 0; }
     76% { top: -325px; opacity: 0; }
     80% { top: 0px; opacity: 1; }
     84% { top: 0px; opacity: 1; }
     96% { top: 0px; opacity: 1; z-index: 0; }
     100%{ top: 325px; opacity: 0; z-index: 0; }
  }
  
  /* For Chrome + Safari + Opera */
  @-webkit-keyframes cycle {
     0%  { top: 0px; } /* When you start the slide, the first image is already visible */
     4%  { top: 0px; } /* Original Position */
     16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
     20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
     21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
     92% { top: -325px; opacity: 0; z-index: 0; }
     96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
     100%{ top: 0px; opacity: 1; }
  }
  
  @-webkit-keyframes cycletwo {
     0%  { top: -325px; opacity: 0; } /* Original Position */
     16% { top: -325px; opacity: 0; }/* Starts moving after 16% to this position */
     20% { top: 0px; opacity: 1; }
     24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
     36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
     40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
     41% { top: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
     100%{ top: -325px; opacity: 0; z-index: -1; }
  }
  
  @-webkit-keyframes cyclethree {
     0%  { top: -325px; opacity: 0; }
     36% { top: -325px; opacity: 0; }
     40% { top: 0px; opacity: 1; }
     44% { top: 0px; opacity: 1; } 
     56% { top: 0px; opacity: 1; } 
     60% { top: 325px; opacity: 0; z-index: 0; }
     61% { top: -325px; opacity: 0; z-index: -1; } 
     100%{ top: -325px; opacity: 0; z-index: -1; }
  }
  
  @-webkit-keyframes cyclefour {
     0%  { top: -325px; opacity: 0; }
     56% { top: -325px; opacity: 0; }
     60% { top: 0px; opacity: 1; }
     64% { top: 0px; opacity: 1; }
     76% { top: 0px; opacity: 1; z-index: 0; }
     80% { top: 325px; opacity: 0; z-index: 0; }
     81% { top: -325px; opacity: 0; z-index: -1; }
     100%{ top: -325px; opacity: 0; z-index: -1; }
  }
  
  @-webkit-keyframes cyclefive {
     0%  { top: -325px; opacity: 0; }
     76% { top: -325px; opacity: 0; }
     80% { top: 0px; opacity: 1; }
     84% { top: 0px; opacity: 1; }
     96% { top: 0px; opacity: 1; z-index: 0; }
     100%{ top: 325px; opacity: 0; z-index: 0; }
  }
  
  /* Welcome Text-area formatting stuffs */
  #welcome-text
  {
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
      width: 700px;
      text-align: left;
  }
  
  #small-print
  {
      font-size: 12px;
  }
  </code></pre>
  
  <p>I have been Google'ing for a while and trying a few things out, but I just can't quite figure it out.  Thanks in advance for any help!</p>
  
  <p>Nathan</p>