Question

不确定为什么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

由于 css 中的动画时间.5s小于jquery-delay time，因此要解决您的问题，您需要增加animation time css 1}}喜欢，

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

Demo

为什么这种css动画和jQuery的组合不能在Firefox中运行？

1 个答案: