css - 动画/关键帧在 Firefox 中不起作用(通过 JavaScript 启动 CSS 动画)

此代码适用于当前的 chrome 和 Internet Explorer，但不适用于当前的 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 添加规则。结帐以下代码

@-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;
}

关于css - 动画/关键帧在 Firefox 中不起作用(通过 JavaScript 启动 CSS 动画)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30507589/