Css动画发射两次;闪烁”;在firefox中

Css animations firing twice and "blinking" in firefox

本文关键字：闪烁 firefox 两次 发射 动画 Css      更新时间：2023-09-26

我在firefox中使用一些css动画时遇到了一些问题。当用户单击某个按钮时，我使用它们来滑入一些单选按钮。在chrome中，一切似乎都很好，但在firefox中，它们看起来像是在发射两次动画（第二次比第一次略高）。我试过几件事，似乎都解决不了这个问题。我在做什么：

$(document).on("click", ".addLesson", function(){
    $(".contentList").addClass("fadeOutRight");
    $(".contentList").hide();
    $(".lessonOptions").addClass("fadeInLeft");
});
$(document).on("click", ".lessonCancel", function(){
    $(".contentList").removeClass("fadeOutRight");
    $(".contentList").addClass("fadeInLeft");
    $(".contentList").show();
    $(".lessonOptions").removeClass("fadeInLeft");
    $(".lessonOptions input[type='radio']").removeAttr("checked");
});

我只是使用animate.css样式的动画本身-

.fadeInLeft 
-webkit-animation: fadeInLeft 1s forwards
animation: fadeInLeft 1s forwards
@-webkit-keyframes fadeInLeft
0%
    opacity: 0
    -webkit-transform: translate3d(-100%, 0, 0)
    transform: translate3d(-100%, 0, 0)
100%
    opacity: 1
    -webkit-transform: none
    transform: none
@keyframes fadeInLeft
0%
    opacity: 0
    -webkit-transform: translate3d(-100%, 0, 0)
    transform: translate3d(-100%, 0, 0)
100%
    opacity: 1
    -webkit-transform: none
    transform: none
.fadeOutRight
-webkit-animation: fadeOutRight 1s 
animation: fadeOutRight 1s
@-webkit-keyframes fadeOutRight
0%
    opacity: 1
100%
    opacity: 0
    -webkit-transform: translate3d(2000px, 0, 0)
    transform: translate3d(2000px, 0, 0)
@keyframes fadeOutRight
0%
    opacity: 1
100%
    opacity: 0
    -webkit-transform: translate3d(2000px, 0, 0)
    transform: translate3d(2000px, 0, 0)

我想也许我正在让javascript和css相互对抗，但我不确定，因为它在chrome中工作得很好。

我还注意到，当我将鼠标悬停在滑动的lessOptionsdiv上时（在它进入舞台后），它会闪烁或闪烁。

我将感谢在这方面的任何帮助，感谢阅读！！

笔在此处-http://codepen.io/anon/pen/IkhGp

所以对我来说，出现这个问题是因为我有一个持续.5s的动画和一个过渡：全部为1s；以及我的动画元素，这导致动画火了两次。删除转换并单独保留动画为我解决了这个问题。

这篇文章发布后有一段时间了，但我遇到了同样的问题。对我来说，只有当开发人员工具打开时，这才是一个问题。关闭工具并刷新，动画就可以正常播放了。

相关文章：