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

Posted 2023-03-06

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

【英文标题】：animation / keyframes not working in Firefox (starting CSS animation via JavaScript)

【发布时间】：2015-08-11 00:31:52

【问题描述】：

此代码适用于 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不行吗？

【问题讨论】：

您使用的是什么版本的 Firefox？

“当前”，即 Windows 上的 38.0.1。

【参考方案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;

【讨论】：

感谢@Nilesh_Mahajan！我更新了问题。不幸的是，我想暗示这个旧建议 (-moz) 没有帮助。查看@web-tiki 的评论...

【参考方案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 中，它应该可以工作。

【讨论】：

它必须是非常旧的 Firefox 版本，因为它应该支持不带前缀的关键帧动画 since version 16

谢谢@brance！我更新了问题。不幸的是，我想暗示这个旧建议 (-moz) 没有帮助。

我迟到了，但你解决了问题吗？试着去掉80%的关键帧，可能过渡太快了，延长动画时长，大概10s，应该更容易看到发生了什么（尤其是现在的火狐动画工具）...