Question

I have a web page with a 13 second animation involving several gif and png images. The process is activated by pressing a button. The problem I am having is that during the animation, all the png images lose resolution just slightly, and then come back into focus about 1 second after the animation finishes.

I have thinned out the code to the relevant pieces showing the problem (using some random pictures and gifs from the web). The animation is 5 seconds and when you press ‘Play Again’ the upper “WordPress” logo loses resolution during the animation. Also, when the animation ends, the lower picture expands in size and then you can see it regain focus about a second later (this is a little harder to see).

You have to wait for the first animation to end and then press ‘Play Again’ to see either of these things happen. Does anyone know why this would happen?

http://jsfiddle.net/q7gCq/1/

To add: It took a little while to get the above example because when I removed too much code the problem stopped. For example, when I remove the background gradient image, then the “WordPress” picture regains resolution very quickly and while the animation is still in progress. See the link:

http://jsfiddle.net/hdWax/

Answer 1

To optimize for speed, your browser doesn’t do any interpolation for resizing until after that animation is finished.

Once the images are sitting still for a bit, the browser then re-renders them with interpolation. You don’t have any reliable control over this, and different browsers will do it differently.