CSS动画 - 鼠标悬停时不需要的断断续续（仅适用于Firefox）

Question

我已经设置了一个页面，其中包含多个面板，当用户单击按钮时会显示这些面板，然后使用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>

http://codepen.io/anon/pen/gbGqgd?editors=010

上面的笔有一个简单版本的页面。如果你点击触发按钮并将鼠标留在原地，那么bug应该是apprent。

（有一些CSS在那里是多余的，因为我没有耐心，同时砍掉它 - 请忽略）