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，更容易編程）。 但是，即使這些動畫也有其挫折。

尋找新東西很酷，但請確保您有牢固的“舊東西”“基礎”，以供瀏覽器使用。