I am facing an issue with CSS animations in Firefox. When I try to slide in some radio buttons upon clicking a button, the animation seems to be firing twice in Firefox while it works fine in Chrome. I have attempted several solutions but haven't been able to fix this problem yet. Here is my code:
$(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");
});
I am using animate.css styles for the animations -
.fadeInLeft {
-webkit-animation: fadeInLeft 1s forwards;
animation: fadeInLeft 1s forwards;
}
@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;
}
@keyframes fadeOutRight {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
I suspect there might be a conflict between the JavaScript and CSS causing this issue, although it functions properly in Chrome.
Additionally, I have observed that when I hover over the lessOptions div being animated, it flickers or blinks once it's on display.
Any assistance regarding this would be greatly appreciated. Thank you for your time!
Take a look at the code here - http://codepen.io/anon/pen/IkhGp