CSS动画无法在Firefox中使用

Question

我使用了Click Click的CSS动画fadeInLeft ，但是由于在过渡中添加了jQuery，因此我注意到了。

$('#one').click(function(){
    $('#two-bck').removeClass('animated');
    $('#three-bck').removeClass('animated');
    $('#four-bck').removeClass('animated');
    $('#one-bck').addClass('animated');
});

点击这里查看完整代码

即使添加了前缀，过渡也无法在Firefox中进行。 有谁知道我该如何解决这个问题？

Answer 1

您从animate.css发出的代码已不知何故，我只是用完整的缩小版animate.css替换了您的动画CSS，嘿，它能正常工作了。 http://jsfiddle.net/kJ2UA/14/

您可以只使用自己的fadeInLeft动画创建自定义版本，如果不想包含完整的样式表，则可以将其包含在页面上的某个位置。

另外，您应该稍微清理一下jQuery（不在主题范围内），例如：

$(document).ready(function(){
    $('.proBtn').on('click', function(){
        $('li').removeClass('active');
        $('li a').removeClass('blue');
        // Remove anything previously animated
        $('.animated').removeClass('animated');
        // Use current ID to select appropriate box
        $('#' + $(this).attr('id') + '-bck').addClass('animated');
        $(this).parent("li").addClass('active');
        $(this).addClass('blue');
    });
});