I am facing an issue with the keyframe animation fadeIn on my page. Currently, it runs immediately after the page is loaded, but I want it to run only after the high resolution image inside the .image div has finished loading. How can I achieve this?
Is there a jQuery solution available for this problem?
http://jsfiddle.net/mixin/6zeBF/
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.image{
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
<div id="content">
<div class="image">
<img src="http://i.imgur.com/uIn74U7.png" alt="">
</div>
</div>