Использование анимации CSS3 по одному слайду в слайд-шоу jQuery (проблемы с FF)

Question

Вот моя проблема:

У меня есть слайд-шоу jQuery (с использованием плагина .cycle lite), и в основном у меня есть супер простой переход с постепенным исчезновением между каждым слайдом.Достаточно просто.

К каждому основному элементу внутри слайдов к ним применяется CSS3-анимация, поэтому при входе в сцену он выглядит немного более анимированным, чем простой слайд., но 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; }

Поэтому в основном я хочу, чтобы одинаковые анимационные эффекты применялись к каждому разделу отдельных слайдов, поэтому я неt используйте любые идентификаторы для стиля.

Любая помощь, которую вы можете оказать, будет высоко оценена!Спасибо!

Answer 1

Прежде всего, ваше имя в вашем CSS: .sec_01, например, и в вашем коде вы устанавливаете класс section_1, а не sec_01.

это правильно?