waypoints, animate.css and opacity on scroll issue

Question

I am using waypoints.js and animate.css to animate elements on my page as you scroll down. I am wondering how to incorporate the built in opacity properties in the animate.css framework. In my fiddle you can see how apon entering the screen from top or bottom my image will animate but how could I make it fade in as well. notice how on the second image it fades in but flash first kinda of looks glitchy.

Here is my javascript:

//Animate from top
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));
},
{ offset: 'bottom-in-view' });
//Animate from bottom
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));
});

or

http://jsfiddle.net/3qy0hs3L/1/

Answer 1

All that needs to be done is add the opacity:0 to your img.