如何在加载时隐藏动画元素？

我在着陆页中将animate.css与waypoints.js一起使用。我想在用户滚动页面时为元素设置动画。但是，问题在于我需要在动画开始之前隐藏元素（如果我不隐藏，animate.css首先隐藏元素然后进行动画处理，这看起来非常丑陋）。

但是，我通过在CSS中添加两个类解决了问题，但这又带来了另一个问题。

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

在添加animation-delay到元素之前，此方法效果很好。这是我要实现的解释。我有这样的元素：

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

我想向每个元素添加动画延迟，以便它们fadeInUp在每个元素中使用animation-delay属性以指定的秒数彼此相邻。我无法使它正常工作。我尝试了以下代码，但未使用动画延迟，但未成功。

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

让我知道我的方法是否完全错误？如果是，那么您可以提供更好的方法来完成。