How to hide animated elements on load?

I'm using animate.css with waypoints.js in my landing page. I want to animate elements when user scrolls the page. But, the problem is that I need to hide elements before the animation starts(if i don't hide, animate.css hides element first and then animates in, that looks pretty ugly).

However, I solved problem by adding two classes in my css but it creates another problem.

.visible{ opacity: 1; }
.invisible {opacity: 0; }
// I added following jquery code 
$('elem').removeClass('invisible').addClass('visible fadeInUp');

This works good until I add animation-delay to an elements. Here is an explanation what I want to achieve. I've elements like this:

<ul>
 <li>element1</li>
 <li>element2</li>
 <li>element3</li>
</ul>

I want to add animation delay to each of the elements, so that they fadeInUp after each other with a specified seconds in each of the elements using animation-delay property. I can't get this to work. I tried following code without using animation-delay but no success.

$('elem').each(function() {
  // code with delay using timeout
  setTimeout(function(){
   $(this).removeClass('invisible').addClass('...');
  }, 100);
});

Let me know if my approach is completely wrong? If yes, then can you provide better way to accomplish.

You can do it with only CSS.

Let's say you are trying to animate a title. Give your element's class this css:

.title { visibility: hidden; }

and give the animated class (which comes from the animate.css) this css:

.animated { visibility: visible !important; }

When it hits the waypoints view it will add .animated per animate.css's code and then it will be visible for the animation.