CSS动画无法在歌剧中使用

Question

我正在使用以下代码在网页上生成动画。 它可以在Safari，Firefox和Chrome中正常运行，但在歌剧中则无效。 还有一件事，在w3c参考 @keyframes规则上，为Opera给出的语法为“ @ -o-keyframes”，但它适用于“ @keyframes”。 我面临的问题是动画只能播放一次。 在那之后，它开始表现怪异。

这是标记。

      <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>

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

这可能是由于错误，或者（很可能是）由于CSS动画是非常新的并且不完全可靠的事实。 您应该始终了解在不运行动画的情况下网页的外观 ，因为浏览器支持尚不存在，并且可能在未来几年内不会支持。

jQuery动画得到更多浏览器的支持（并且，IMO，更容易编程）。 但是，即使这些动画也有其挫折。

寻找新东西很酷，但请确保您有牢固的“旧东西”“基础”，以供浏览器使用。