Css动画触发两次并在Firefox中“闪烁”

Question

我在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上（进入舞台后，它闪烁或闪烁。

感谢您的帮助，感谢您的阅读！！

Pen here-http://codepen.io/anon/pen/IkhGp