在重复滚动时重新触发css动画

Question

我创建了模拟浏览器和移动屏幕滚动的动画。这些是由jquery在视口内部开始触发的CSS动画。

你可以在这里看到一个例子：

http://jsfiddle.net/3jvvvf4s/16/#&togetherjs=es5rIAv2bE

就像现在一样，动画只能在每次浏览时触发一次。意味着用户向下滚动页面，动画开始，模拟屏幕到达底部，并保持在那里。客户端已经要求我进行设置，因此一旦视口外部，模拟滚动重置，并且可以由用户再次向上或向下滚动来重新触发。我很难知道如何做到这一点。

这是我设置的用于触发动画的脚本：

<script>
function activeAnimation() {
  var vHeight = $(window).height(),
    vtop = $(window).scrollTop(),
    vBottom = (vHeight + vtop);

  $('.for-anim').each(function() {
    var animElem = $(this)
    if (!animElem.hasClass('playit')) {
      var elHeight = animElem.outerHeight(),
        elTop = animElem.offset().top,
        elBottom = (elHeight + elTop);
      if ((vtop >= elBottom) || (elTop <= vBottom)) {
        animElem.addClass('playit');
      }
    }
  });
};
$(window).on('scroll resize', activeAnimation);
</script>

我发现这个问题是针对不同的动画提出同样的问题：

How to Trigger css animation both on scrolling down and up

由于我关注的动画不是入口动画，我不必担心重置可见性/隐身性，但似乎它仍然有用吗？

让我知道你是否有任何想法，我的神经元敬酒。

非常感谢！