Firefox 开发者版延迟的动画怪异行为

Question

我最近开始使用 Firefox 开发者版，我发现动画有一个奇怪的延迟行为。

http://plnkr.co/edit/Tr1nd5r0gAyy3eH3Z7Zh?p=preview

.selection-buttons.ng-animate.ng-hide-add {
  animation: 30s linear 1s fadeOutDown;
  opacity: 1;
}

.selection-buttons.ng-animate.ng-hide-remove {
  animation: 30s linear 1s fadeInUp;
  opacity: 0;
}

如果您使用 Firefox Developer 打开此 Plunker，动画将正常播放，但随后文本将再次隐藏几秒钟然后返回（或者再次显示几秒钟然后在您单击第二次）。我已经在其他浏览器（Chrome、Firefox standard、Safari 和 Pale Moon）中对此进行了测试，动画效果很好。

动画是使用 animate.css 实现的，我在 CSS 中使用了动画名称，以便将它们与 angular 中的 ng-animate 一起使用，但我还没有在没有 ng-animate

的情况下测试了正常的动画

我注意到 ng-animate 在动画结束后删除了它的 classes 方式。我已经计时并且 class 移除恰好延迟了动画持续时间的一半（如果你增加动画持续时间，延迟将相应增加）所以动画结束但其他属性由 [=37= 添加]（例如不透明度）一直保留到删除 classes 为止。对于任何延迟值都会发生这种情况，无论设置的值如何，只要动画有延迟，它就会执行此操作。令人惊讶的是，即使从 transition 属性或 transition-delay 属性

的过渡有延迟（但仍在使用动画），它也会发生

如果我从 CSS 属性中删除延迟，动画效果很好。

我还使用 animation-name、animation-duration 和 animation-delay 代替 animation 属性

进行了测试

Answer 1

我已经在 bugzilla 上开了一张票，它已被确认是一个新功能引入的错误（hiRes dom 时间戳）取代了从 44 和 [=18= 开始的 Firefox 版本的当前时间戳] 版本从 49 开始。 Firefox Developer 版本使用实验版本，而 Firefox 标准版本仅稳定版本（最新稳定版目前为 42，未受影响，版本 43 也是如此）。

https://bugzilla.mozilla.org/show_bug.cgi?id=1231619

Angular 团队已收到此错误的通知

Firefox 开发者版延迟的动画怪异行为

Animation with delay in firefox developer edition weird behavior

css-animations

animate.css

ng-animate

firefox-developer-edition