Jquery CSS动画-鼠标悬停时不必要的口吃（仅限Firefox）

我已经设置了一个包含多个面板的页面，当用户单击按钮时会显示这些面板，然后使用jquery将页面动画显示到下一张幻灯片的#

还有一些元素会在页面进入新位置时使用css动画淡入视图

仅在firefox中-当淡入淡出动画时，如果鼠标位于新面板上的某个元素上，则动画会出现难看的闪烁/结巴，就像是多次触发一样。如果鼠标在其他地方，它将按预期工作

<section id="slide-2" class="content page-2 hidden">
  <div class="row">
    <article class="copy page-1-copy">
      <h2>
        The animated elements flash if mouse enters during animation.
      </h2>

      <a><button class="stat3 fadeIn animated alt" value="Sign up">Really?
        </button></a>
    </article>
  </div>
</section>

上面的钢笔有一个简单的页面版本。如果您单击触发按钮并将鼠标放在它所在的位置，则应该会发现错误

（有一些CSS是多余的，因为我在砍掉它的时候失去了耐心-请忽略）
你可以忽略大部分代码片段，直接转到th codepen。前缀
-moz-
呢？或者你正在使用prefixfreejs
prefixfreejs
是的，我在主构建的所有东西上都尝试了prefix
-moz-
，firefox开发工具忽略了它，通常它似乎不需要（caniuse等）。我应该补充说，我正在使用animate.css，尽管在发布之前我会省去它。