JSFiddle - React, Tailwind, and code Playground

HTML

<p>scroll down to simulate the animation with css3</p>
<img src="http://img.gadgetian.com/Angry-Birds-Space-021-300x300.png"/>
<img src="http://venturebeat.files.wordpress.com/2012/03/angry-birds-space-655.jpg?w=558&h=9999&crop=0"/>
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/3/8/1331218953062/angry-birds-space.jpg" />

CSS

body{
    height: 1400px;
}

p{
    margin-bottom: 200px;
}

img{
    -webkit-transform: scale(.9);
    opacity:0;
    -webkit-transition: 1s ease all;
}

img.loaded{
    -webkit-transform:scale(1);
    opacity:1;
}

JavaScript

//preload all of your images likely via lazy loading

theImage = document.getElementsByTagName('img');

window.addEventListener('scroll', function(){
    if(window.pageYOffset > 150){
        //check to make sure it's loaded and THEN
        theImage[0].setAttribute('class', 'loaded');
        
    }
    
    if(window.pageYOffset > 400){
        //check to make sure it's loaded and THEN
        theImage[1].setAttribute('class', 'loaded');
    }
    
    if(window.pageYOffset > 600){
        //check to make sure it's loaded and THEN
        theImage[2].setAttribute('class', 'loaded');
    }
    
}, false);