Javascript Css动画发射两次和；“闪烁”；在firefox中

我在firefox中使用一些css动画时遇到了一些问题。我使用它们在用户单击按钮时滑入一些单选按钮。在chrome中，一切似乎都很好，但在firefox中，它们看起来像是启动了两次动画（第二次动画比第一次稍高）。我尝试了一些方法，但似乎无法解决这个问题。以下是我正在做的：

$(document).on("click", ".addLesson", function(){
    $(".contentList").addClass("fadeOutRight");
    $(".contentList").hide();
    $(".lessonOptions").addClass("fadeInLeft");
});

$(document).on("click", ".lessonCancel", function(){
    $(".contentList").removeClass("fadeOutRight");
    $(".contentList").addClass("fadeInLeft");
    $(".contentList").show();
    $(".lessonOptions").removeClass("fadeInLeft");
    $(".lessonOptions input[type='radio']").removeAttr("checked");
});

我只是在动画本身中使用animate.css样式-

.fadeInLeft 
-webkit-animation: fadeInLeft 1s forwards
animation: fadeInLeft 1s forwards

@-webkit-keyframes fadeInLeft
0%
    opacity: 0
    -webkit-transform: translate3d(-100%, 0, 0)
    transform: translate3d(-100%, 0, 0)
100%
    opacity: 1
    -webkit-transform: none
    transform: none
@keyframes fadeInLeft
0%
    opacity: 0
    -webkit-transform: translate3d(-100%, 0, 0)
    transform: translate3d(-100%, 0, 0)
100%
    opacity: 1
    -webkit-transform: none
    transform: none

.fadeOutRight
-webkit-animation: fadeOutRight 1s 
animation: fadeOutRight 1s

@-webkit-keyframes fadeOutRight
0%
    opacity: 1
100%
    opacity: 0
    -webkit-transform: translate3d(2000px, 0, 0)
    transform: translate3d(2000px, 0, 0)

@keyframes fadeOutRight
0%
    opacity: 1
100%
    opacity: 0
    -webkit-transform: translate3d(2000px, 0, 0)
    transform: translate3d(2000px, 0, 0)

我想可能是我让javascript和css互相对抗，但我不确定，因为它在chrome中运行良好

我还注意到，当我将鼠标移到我正在滑入的lessOptions div上时（在它进入舞台后），它会闪烁或闪烁

如果您能在这方面提供帮助，我将不胜感激，谢谢您的阅读

---

笔在这里-

所以对我来说，出现这个问题是因为我有一个持续0.5秒的动画，还有一个过渡：都是1；以及我的动画元素，这导致动画触发两次。删除转换并保留动画对我来说解决了这个问题。

在JSFIDLE中看到这一点会很好，这样我们就可以看到它运行添加的笔（在底部）尝试：当你使用css3动画时，让firefox也像这样-moz转换：translate3d（2000px，0，0）；以及关键帧-moz关键帧fadeInLeft@user3201696