I have been working on a way to make images fade in using CSS3 once they have finished loading. However, I am facing an issue where the image fades in and out for a brief moment twice instead of just being blank and fading in.
My attempt at a solution involved separating the animation code into a separate class which I apply after setting the opacity to zero initially (done in JavaScript so non-JS users can still view the images).
Despite my efforts, the problem persists.
I suspect that the issue lies in the fact that the code is setting the opacity to zero and then immediately adding an animation transition class, which somehow interferes with the opacity change (I'm not sure why this happens... shouldn't it finish changing opacity before moving on to add the class?)
// Nice thumbnail loading
$('.thumb').css('opacity','0').addClass('thumb-animated').on('load', function(){
$(this).css('opacity','1');
});
.resources .thumb-animated {
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-ms-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}