Flickering in firefox

[lukewilde]

I’m working on a new site and a few things are going wrong in firefox, on the projects page the images should fade in from the right this work in IE, Chrome and Safari as far as i have checked but just flickers a lot in firefox. Can anyone suggest a fix for this or does the browser not support this kind of effect? If so how can i stop the effect happening in firefox and just load normally? Another thing i noticed in firefox the hover effect on the project page images which works fine on the homepage and works fine everywhere on the other browsers doesn’t work as intended in firefox.

Also i noticed on the homepage atleast that there is a gap on the right in firefox which creates a horizontal scroll

I got the code from here: http://ademilter.com/lab/liffect/

And the code below is what i used for it:

ul[data-liffect=”slideRight”] li {
opacity: 0;
position: relative;
-webkit-animation: slideRight 600ms ease both;
-webkit-animation-play-state: paused;
-moz-animation: slideRight 600ms ease both;
-moz-animation-play-state: paused;
-o-animation: slideRight 600ms ease both;
-o-animation-play-state: paused;
animation: slideRight 600ms ease both;
animation-play-state: paused;
}

ul[data-liffect=”slideRight”].play li {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}

@-webkit-keyframes slideRight {
0% { opacity: 0; left: 30px; }
100% { opacity: 1; left: 0; }
}

@-moz-keyframes slideRight {
0% { opacity: 0; left: 30px; }
100% { opacity: 1; left: 0; }
}

@-o-keyframes slideRight {
0% { opacity: 0; left: 30px; }
100% { opacity: 1; left: 0; }
}

@keyframes slideRight {
0% { opacity: 0; left: 30px; }
100% { opacity: 1; left: 0; }
}

$(document).ready(function () {
$(“ul[data-liffect] li”).each(function (i) {
$(this).attr(“style”, “-webkit-animation-delay:” + i * 300 + “ms;”
+ “-moz-animation-delay:” + i * 300 + “ms;”
+ “-o-animation-delay:” + i * 300 + “ms;”
+ “animation-delay:” + i * 300 + “ms;”);
if (i == $(“ul[data-liffect] li”).size() -1) {
$(“ul[data-liffect]”).addClass(“play”)
}
});
});

[Author]

Posts