使用CSS3动画，jQuery幻灯片放映中的每张幻灯片一张（FF问题）

我的问题是：

我有一个使用.cycle lite插件的jQuery幻灯片，基本上在每张幻灯片之间有一个超级简单的淡入淡出过渡。很简单

幻灯片中的每个主要元素都应用了CSS3动画，因此当它们进入场景时，它的动画效果要比简单的幻灯片好一点

它在webkit中工作得非常好，但firefox只将css3动画应用于第一张幻灯片。其余的幻灯片只是淡入淡出

我想知道是否有人知道这是为什么，是否有一个修复，或者如果我的代码是一团糟

谢谢

HTML

因此，基本上我希望将相同的动画效果应用到各个幻灯片的每个部分，这就是为什么我不使用任何ID进行样式设置的原因

---

您能给予的任何帮助都将不胜感激！谢谢

首先，您在CSS中的命名是：.sec_01，例如，在代码中，您将class section_1设置为secu 01

---

正确吗？

打得好。在我原来的帖子中修复了这个问题。这在我的html中是正确的。动画CSS一次应用于所有幻灯片？这难道不意味着所有的动画都一次开始，所以当第一个动画完成时，它们都完成了吗？这是我的想法之一。。。但是在webkit上，它的工作方式正是我想要的，所以要么webkit运行错误，要么我的代码中有一些东西需要更改。只是还不太确定。如果没有完整的测试用例，很难说WebKit到底发生了什么。。。。

<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>

/* 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; }