这是我的问题:
我有一个 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 进行样式设置的原因。
您可以提供的任何帮助将不胜感激!谢谢!