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
Post a Comment