CSS-анимация с Chrome и Firefox

Question

Я пытаюсь получить небольшое слайд-шоу, идущее на целевой странице. Он отлично работает в Firefox, но не в Chrome. Example Page Вот мой CSS

/* 
    ********* 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; 
} 

Я Google'ing на некоторое время и попробовать несколько вещей, но я просто не могу вполне понять это. Заранее благодарю за любую помощь!

Натан

Answer 1

Вы просто пропустили ваши имена цикла:

#slider li.secondanimation { 
    animation: cycletwo 25s linear infinite; 
    -webkit-animation: ***cycle*** 25s linear infinite; // change to cycletwo 
} 

и так далее.