动画/关键帧在 Firefox 中不起作用（通过 JavaScript 启动 CSS 动画）

Question

此代码适用于 current chrome 和 Internet Explorer，但不适用于 current firefox（更新代码为 unnecessary -moz prefix）：

@-moz-keyframes sh-tada {
  10% {
    opacity:1;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes sh-tada {
  10% {
    opacity:1;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@keyframes sh-tada {
  10% {
    opacity:1;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

.sh-tada {
  opacity:0;
  -webkit-animation: sh-tada 2s linear 1;
  -moz-animation: sh-tada 2s linear 1;
  animation: sh-tada 2s linear 1;
}

该元素根本没有出现。

唉，在这种情况下，其他同名的问题都没有帮助......

添加/提示

也许我的问题不在于上面的代码，而在于问题

CSS 动画是如何触发的？

有问题的元素只需使用...style.display='inline' 打开即可。对于 Chrome 和 IE，这似乎没问题。但是firefox不行吗？

Answer 1

您忘记为 Firefox 添加规则。签出以下代码

@-webkit-keyframes sh-tada {
  10% {
    opacity:1;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@-moz-keyframes sh-tada {
  10% {
    opacity:1;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@keyframes sh-tada {
  10% {
    opacity:1;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

.sh-tada {
  opacity:0;
  -webkit-animation: sh-tada 2s linear 1;
  -moz-animation: sh-tada 2s linear 1;
  animation: sh-tada 2s linear 1;
}

Answer 2

那是因为您缺少 Mozilla Broswer 关键帧的定义。

@-moz-keyframes sh-tada {
10% {
    opacity:1;
}
80% {
    opacity:1;
}
100% {
    opacity:0;
}
}

和 moz 动画

.sh-tada {
  -moz-animation:sh-tada 2s linear 1;
}

将这些添加到您的 css 中，它应该可以工作。