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

感谢您的阅读！

笔在此处 - http://codepen.io/anon/pen/IkhGp

Answer 1

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

Answer 2

自从发布此消息以来已有一段时间，但我遇到了同样的问题。对我来说，只有当开发人员工具打开时，这对我来说似乎是一个问题。关闭工具并刷新，动画就可以正常播放了。