Image effect increase when page loads

Question

In this script the images increase but only as we scroll http://tympanus.net/Development/GridLoadingEffects/index8.html

The idea is every time the page loads the images have that effect without having to scroll

the images on my website are all in this code

<img class='alignleft' src='URL DA IMAGEM' />

Answer 1

It’s extremely simple to do this, I took a look at the effect of the link images and did something similar, but without the scrolling:

<img class='alignleft' src='http://tympanus.net/Development/GridLoadingEffects/images/2.jpg'/>
<br />
<img class='alignleft' src='http://tympanus.net/Development/GridLoadingEffects/images/13.png'/>

img.alignleft{
    animation: sizeEffect .6s;
}

@keyframes sizeEffect{
    0%{
        opacity: .1;
        transform: scale(.4);
    }
    50%{
        opacity: .8;
        transform: scale(1.04);
    }
    100%{
        transform: scale(1);
    }
}

See the complete example, with vendor prefixes for the various browsers).