Css animations firing twice and “blinking” in firefox

Question

I'm having a bit of an issue using some css animations in firefox. I am using them to slide in some radio buttons when the user clicks a button. In chrome everything seems to be fine but in firefox they kind of look like they are firing the animation twice (the second one slightly over the first one). I've tried a few things and can't seem to solve this problem. Here's what I'm doing :

$(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");
});

And I'm just using animate.css styles for the animations themselves -

.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)

I think maybe I'm making the javascript and css fight against each other, but I'm not to sure because it works fine in chrome.

I also noticed when I mouse over the lessOptions div I'm sliding in (after it's entered the stage) it flickers or blinks.

I would appreciate any help on this, thanks for reading!!

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

Answer 1

So for me, this problem occurred because I had an animation that lasted .5s, and a transition: all 1s; as well on my animated elements, and this was causing the animation to fire twice. Removing the transition and leaving the animation alone fixed the issue for me.

Answer 2

A while since this was posted but I came looking after having the same issue. For me seems to be an issue for me only when developer tools are open. Close the tools and refresh and the animation was playing correctly.