0

Web ページでアニメーションを生成するために次のコードを使用しています。Safari、Firefox、Chrome では正常に動作しますが、Opera では動作しません。もう 1 つ、@keyframes ルールのw3c リファレンスでは、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; }
    }
4

1 に答える 1

1

これは、エラーが原因である可能性があります。または、(ほとんどの場合) CSS アニメーションが非常に新しく、正確には信頼できないという事実が原因である可能性があります。アニメーションが実行されていない状態で Web ページがどのように表示されるかを常に認識しておく必要があります。これは、ブラウザーのサポートがまだ提供されておらず、おそらく今後数年間は提供されないためです。

jQuery アニメーションは、より多くのブラウザーでサポートされています (そして、IMO では、プログラミングがはるかに簡単です)。ただし、これらのアニメーションにも欠点があります。

新しいものを選ぶのは素晴らしいことですが、ブラウザーが頼りにできるように、「古いもの」のしっかりとした「基盤」があることを確認してください。

于 2012-12-12T07:20:15.433 に答える