javascript - Css animations firing twice and "blinking" in firefox -



javascript - Css animations firing twice and "blinking" in firefox -

i'm having bit of issue using css animations in firefox. using them slide in radio buttons when user clicks button. in chrome seems fine in firefox kind of firing animation twice (the sec 1 on first one). i've tried few things , can't seem solve problem. here's 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 using animate.css styles animations -

.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 javascript , css fighting against each other, i'm not sure because works fine in chrome.

i noticed when mouse on lessoptions div i'm sliding in (after it's entered stage) flickers or blinks.

i appreciate help on this, reading!!

pen here - http://codepen.io/anon/pen/ikhgp

javascript jquery html css animation

Comments

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -