Spinner + Ease-in transition

[Tanaan]

Hi there, I'm experimenting some problems when I try to use CSS in order to fade in the images after they are loaded. This work good but it does it on the tag, spinner included, but not on the image after is loaded. I mean, the effect is applied to the spinner. After the image is loaded, this is just shown but without any effect, because that was applied when we load tag. Am I doing something wrong? This is what I have

HTML

<div class="col-xs-12 workImage">
      <img src="images/spinner.gif" data-src="pictures/pic3.jpg" class="img-responsive" alt="" />
</div>

JS

$(function() {
    $('.workImage').find('img').unveil(-300, function() {
        $(this).css( { 'opacity': 1} );
    });
 });

And CSS

.workImage img{
    opacity: 0;
    transition: opacity 5s ease-in;
}

Thanks in advance!