css动画不在歌剧中工作

时间:2012-12-12 07:13:28

标签: html css html5 css3 css-animations

我正在使用以下代码在我的网页上生成动画。它在safari,firefox和chrome中运行良好但在opera中不起作用。还有一件事,在w3c reference @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; }
    }

1 个答案:

答案 0 :(得分:1)

这可能是由于错误造成的,或者(很可能)是因为 CSS动画非常新且不完全可靠。您应该始终了解您的网页在没有运行动画的情况下的外观,因为浏览器支持尚不存在,而且可能不会在接下来的几年内出现。

更多浏览器支持jQuery动画(而且,IMO,更容易编程)。然而,即使这些动画也有挫折。

寻找新的东西很酷,但确保你有一个坚实的“基础”的“旧东西”供浏览器使用。