jquery - 为什么这种 css 动画和 jQuery 的组合不能在 Firefox 中工作？

Question

Here it is on CodePen...

不确定为什么 Firefox 不在此处显示 CSS 动画。这在 Chrome 和 Safari 中运行良好。当我取出 jQuery 时，它执行了 CSS 动画，所以 jQuery 可能无效？

#rs-bg-wrap {height: 700px;
    width:100%!important;   }

.circles-container {
    margin-left: auto; margin-right:auto; 
    max-width:860px;display:none;
    height: 400px;
}

.background-1 { height:700px;  width:100%;
    background: #495d63;
    background-image: -webkit-radial-gradient(top, circle cover, #6f878e 0%, #495d63 80%);
    background-image: -moz-radial-gradient(top, circle cover, #6f878e 0%, #495d63 80%);
    background-image: -o-radial-gradient(top, circle cover, #6f878e 0%, #495d63 80%);
    background-image: radial-gradient(top, circle cover, #6f878e 0%, #495d63 80%);
}

.circle, .circle3, .circle5 { display:none;
    height: 200px;width:200px; border-radius:200px; float:left; margin-top:100px; 
    background: #fff; color: #495d63;line-height:200px;text-align:center; font-size:25px;animation: circleani .5s ease-in-out  alternate;
    -webkit-animation: circleani .5s ease-in-out  alternate;
    -moz-animation: circleani .5s ease-in-out  alternate;
}

.circle2, .circle4 { display:none;
    height: 50px;width:50px; border-radius:50px; float:left; margin:39px;margin-top:165px;font-size:56px;
    color:#fff;line-height:50px;text-align:center;animation: circleani .5s ease-in-out  alternate;
    -webkit-animation: circleani .5s ease-in-out  alternate;
    -moz-animation: circleani .5s ease-in-out  alternate;
}

@keyframes circleani {
    from { transform: rotateY(-90deg); }
    to { transform: rotateY(0deg); }
}
@-webkit-keyframes circleani {
    from { -webkit-transform: rotateY(-90deg); }
    to { -webkit-transform: rotateY(0deg); }
}
@-moz-keyframes circleani {
    from { -moz-transform: rotateY(-90deg); }
    to { -moz-transform: rotateY(0deg); }
}

jQuery

$('.circles-container').delay(600).fadeIn('fast');
$('.circle').delay(1200).fadeIn('fast');
$('.circle2').delay(2000).fadeIn('fast');
$('.circle3').delay(2800).fadeIn('fast');
$('.circle4').delay(3400).fadeIn('fast');
$('.circle5').delay(4000).fadeIn('fast');

Answer 1

因为你的动画时间是 .5s in css 这比你的 jquery-delay time 少，要解决你的问题你需要在 css 中增加您的动画时间，例如，

-moz-animation: circleani 5s ease-in-out alternate;// using 5 inplace of .5

Demo