0

これが私の問題です：

jQuery スライドショー (.cycle lite プラグインを使用) があり、基本的には各スライド間の非常に単純なフェード トランジションがあります。簡単です。

スライド内の各主要要素には CSS3 アニメーションが適用されているため、シーンに入ると単純なスライドよりも少しアニメーション化されます。

Webkit では完全に機能しますが、firefox は css3 アニメーションを最初のスライドにのみ適用します。残りのスライドは単にフェード インします。

これがなぜなのか、誰かが知っているのか、修正があるのか​​ 、それとも私のコードがめちゃくちゃなのかと思っていました.

ありがとう！

HTML

<div class="slideshow">
    <div class="slide" id="slide_01">
        <div class="sec_01></div>
        <div class="sec_02></div>
        <div class="sec_03></div>
    </div>
    <div class="slide" id="slide_02">
        <div class="sec_01></div>
        <div class="sec_02></div>
        <div class="sec_03></div>
    </div>
</div>

CSS

/* ANIMATIONS */

Move In from left
@-moz-keyframes fadeLeft {
  0% {-moz-transform:translate(5000px,0);}
  70% {-moz-transform:translate(-100px,0);}
  100% {-moz-transform:translate(0,0);}
}

@-webkit-keyframes fadeLeft {
  0% {-webkit-transform:translate(5000px,0);}
  70% {-webkit-transform:translate(-100px,0);}
  100% {-webkit-transform:translate(0,0);}
}

---------------------------

Move in from right

@-moz-keyframes fadeRight {
  0% {-moz-transform:translate(-5000px,0);}
  70% {-moz-transform:translate(100px,0);}
  100% {-moz-transform:translate(0,0);}
}

@-webkit-keyframes fadeRight {
  0% {-webkit-transform:translate(-5000px,0);}
  70% {-webkit-transform:translate(100px,0);}
  100% {-webkit-transform:translate(0,0);}
}

----------------------

Move in from Top
@-moz-keyframes fadeTop {
  0% {-moz-transform:translate(0,-800px);}
  70% {-moz-transform:translate(0,100px);}
  100% {-moz-transform:translate(0,0);}
}

@-webkit-keyframes fadeTop {
  0% {-webkit-transform:translate(0,-800px);}
  70% {-webkit-transform:translate(0,100px);}
  100% {-webkit-transform:translate(0,0);}
}



CSS applied to each slide

/* SEC_01 */
.slide .sec_01 {-webkit-animation:fadeRight .5s ease;  -moz-animation:fadeRight .5s ease;}

/* SEC_02 */
.slide .sec_02 {-webkit-animation:fadeTop .5s ease;  -moz-animation:fadeTop .5s ease;}


/* SEC_02 */
.slide .sec_03 {-webkit-animation:fadeLeft .75s ease;  -moz-animation:fadeLeft .75s ease; }

基本的には、個々のスライドの各セクションに同じアニメーション効果を適用したいので、スタイリングに ID を使用しません。

あなたが与えることができるどんな助けも大歓迎です！ありがとう！

4

1 に答える 1

0

まず、CSS での命名: たとえば .sec_01 で、コードでは、sec_01 ではなくクラス section_1 を設定します。

それが正しいか？

于 2012-02-24T18:44:41.687 に答える