css animations not working in firefox and opera

mizu · Dec 12, 2012

I'm using the following code for generating animations on my webpage. It works fine in safari, firefox and chrome but does not work in opera. One more thing, on the w3c reference for @keyframes rule, the syntax given for opera is "@-o-keyframes" but instead it works on "@keyframes".The problem that I am facing is that the animation works only once. After that it starts acting weirdly.Here is the markup. <div id="content-slider"> <div id="slider">  <div id="mask">  <ul> <li id="first" class="firstanimation">  <a href="http://stackoverflow.com/questions/13834649/#"> <img src="http://stackoverflow.com/questions/13834649/HP-7.jpeg" alt="Cougar"/> </a> <div class="tooltip"> <h1>Harry Potter 7</h1> </div> </li> <li id="second" class="secondanimation"> <a href="http://stackoverflow.com/questions/13834649/#"> <img src="http://stackoverflow.com/questions/13834649/SH-2.jpg" alt="Lions" /> </a> <div class="tooltip"> <h1>Sherlock Holmes 2</h1> </div> </li> <li id="third" class="thirdanimation"> <a href="http://stackoverflow.com/questions/13834649/#"> <img src="http://stackoverflow.com/questions/13834649/rango.jpg" alt="Snowalker"/> </a> <div class="tooltip"> <h1>Rango</h1> </div> </li> <li id="fourth" class="fourthanimation"> <a href="http://stackoverflow.com/questions/13834649/#"> <img src="http://stackoverflow.com/questions/13834649/DM.png" alt="Howling"/> </a> <div class="tooltip"> <h1>Despicable Me 2</h1> </div> </li> <li id="fifth" class="fifthanimation"> <a href="http://stackoverflow.com/questions/13834649/#"> <img src="http://stackoverflow.com/questions/13834649/Mad-3.jpeg" alt="Sunbathing"/> </a> <div class="tooltip"> <h1>Madagascar 3</h1> </div> </li> </ul> </div>  <div class="progress-bar"> </div>  </div>  </div>The CSS. #slider { float: right; background: #000000; border: 3px solid #8B7355; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); height: 255px; margin: 18px 2%; width: 75%; overflow: visible; position: relative; } /* HIDE ALL OUTSIDE OF THE SLIDER */ #mask { overflow: hidden; height: 255px; } /* IMAGE LIST */ #slider ul { margin: 0; padding: 0; position: relative; } #slider li { width: 75%; /* Width Image */ height: 253px; /* Height Image */ position: absolute; top: -250px; /* Original Position - Inside of the Slider */ list-style: none; } #slider img { width:820px; height: 255px; } #slider li.firstanimation { animation: cycle 25s linear infinite; -o-animation: cycle 25s linear infinite; } #slider li.secondanimation { animation: cycletwo 25s linear infinite; -o-animation: cycletwo 25s linear infinite; } #slider li.thirdanimation { animation: cyclethree 25s linear infinite; -o-animation: cyclethree 25s linear infinite; } #slider li.fourthanimation { animation: cyclefour 25s linear infinite; -o-animation: cyclefour 25s linear infinite; } #slider li.fifthanimation { animation: cyclefive 25s linear infinite; -o-animation: cyclefive 25s linear infinite; } @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: 250px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */ 21% { top: -250px; opacity: 0; z-index: -1; } /* Return to Original Position */ 92% { top: -250px; opacity: 0; z-index: 0; } 96% { top: -250px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/ 100%{ top: 0px; opacity: 1; } } @keyframes cycletwo { 0% { top: -250px; opacity: 0; } /* Original Position */ 16% { top: -250px; 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: 250px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */ 41% { top: -250px; opacity: 0; z-index: -1; } /* Return to Original Position */ 100%{ top: -250px; opacity: 0; z-index: -1; } } @keyframes cyclethree { 0% { top: -250px; opacity: 0; } 36% { top: -250px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; } 60% { top: 250px; opacity: 0; z-index: 0; } 61% { top: -250px; opacity: 0; z-index: -1; } 100%{ top: -250px; opacity: 0; z-index: -1; } } @keyframes cyclefour { 0% { top: -250px; opacity: 0; } 56% { top: -250px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 250px; opacity: 0; z-index: 0; } 81% { top: -250px; opacity: 0; z-index: -1; } 100%{ top: -250px; opacity: 0; z-index: -1; } } @keyframes cyclefive { 0% { top: -250px; opacity: 0; } 76% { top: -250px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100%{ top: 250px; opacity: 0; z-index: 0; } }

css animations not working in firefox and opera

mizu

New Member