css animations not working in opera

Question

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">  <!-- Slider container -->
            <div id="mask">  <!-- Mask -->
                <ul>
                    <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
                        <a href="#"> <img src="HP-7.jpeg" alt="Cougar"/> </a>
                        <div class="tooltip"> <h1>Harry Potter 7</h1> </div>
                    </li>

                    <li id="second" class="secondanimation">
                        <a href="#"> <img src="SH-2.jpg" alt="Lions" /> </a>
                        <div class="tooltip"> <h1>Sherlock Holmes 2</h1> </div>
                    </li>

                    <li id="third" class="thirdanimation">
                        <a href="#"> <img src="rango.jpg" alt="Snowalker"/> </a>
                        <div class="tooltip"> <h1>Rango</h1> </div>
                    </li>

                    <li id="fourth" class="fourthanimation">
                        <a href="#"> <img src="DM.png" alt="Howling"/> </a>
                        <div class="tooltip"> <h1>Despicable Me 2</h1> </div>
                    </li>

                    <li id="fifth" class="fifthanimation">
                        <a href="#"> <img src="Mad-3.jpeg" alt="Sunbathing"/> </a>
                        <div class="tooltip"> <h1>Madagascar 3</h1> </div>
                    </li>
                </ul>

            </div>  <!-- End Mask -->
            <div class="progress-bar">

            </div>  <!-- Progress Bar -->
        </div>  <!-- End Slider Container -->
    </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; }
    }

Answer 1

This may be due to an error, or (most likely) is due to the fact that CSS animations are very new and not exactly reliable . You should always be aware of how your webpage will look without the animations running , because the browser support just isn't there yet, and probably won't be for the next couple of years.

jQuery animations are supported by more browsers (and, IMO, much easier to program). However, even these animations have their setbacks.

Going for the new stuff is cool and all, but make sure you have a solid "base" of the "old stuff" for browsers to fall back on.