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 例如，在您的代码中，您设置类 section_1 而不是 sec_01。

这是对的吗？

于 2012-02-24T18:44:41.687 回答