scrollmonitor - scroll into view with transition

HTML

<script src="http://sakabako.github.io/scrollMonitor/scrollMonitor.js"></script>
<script src="https://github.com/stutrek/scrollMonitor/blob/master/scrollMonitor.js"></script>
<div class="pushme">pushes down</div>

<div class="boxes box1 ani">box1</div>

<div class="boxes box2 ani">box2</div>

<div class="boxes box3 ani">box3</div>

<script type='text/javascript' src="http://sakabako.github.io/scrollMonitor/scrollMonitor.js"></script>
<script type="text/javascript">
 
	$('.ani').each(function(i, element) {

		var watcher = scrollMonitor.create( element );

    // do not animate if it is already in the viewport
        if (watcher.isInViewport) {
    	    $(element).removeClass('ani')
        } else {
		    watcher.stateChange(function() {
			    $(element).addClass('seen', this.enterViewport)
		    });
        }

	})
</script>

CSS

.pushme {
    padding: 200px;
    font-family: Arial;
    font-size: 16px;
    color: #ccc;
    text-align: center;
}

.boxes {
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    margin: 10px auto;
    padding: 25px 15px 0 15px;   
}

.ani {					
	-webkit-transition: all 0.2s .5s ease-in-out;
          transition: all 0.2s .5s ease-in-out;
}

.boxes.ani {
     width: 50px;
    height: 50px;   
    background-color: #999999;
}

.boxes,
.boxes.ani.seen {
    width: 100px;
    height: 100px;
}

.box1,
.box1.ani.seen {
    background: #ff0066;
}

.box2,
.box2.ani.seen {
    background: #ff0099;
}

.box3,
.box3.ani.seen {
    background: #ff6600;
}