从 0 到 1 不透明度的动画在 FireFox 中不起作用，但在 Chrome 中起作用

Question

我有以下 html 和 CSS 代码来应用动画，以便徽标图像从 0 到 1 的不透明度逐渐消失。这在最新的 Chrome 浏览器中效果很好，但在最新的 FireFox 或 IE 11 中却不行。

我已通过“logo-new”类确保徽标图像的初始不透明度为 0，因此当动画发生时，它从 0 不透明度开始。

问题：如何使这种类型的动画在 FireFox 和 IE 11 中工作？

HTML

<div id="newlogo" class="logo-new animate"></div>

CSS

.logo-new {
    background-image: url("../logo.png");
    background-repeat: no-repeat;
    height: 95px;
    opacity: 0;
    width: 479px;
}


.animate {
    -moz-animation: fadeIn 1s ease-in;
    -webkit-animation: fadeIn 1s ease-in;
    animation: fadeIn ease-in 1s 1;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}


@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: .5;}
}

更新 1

正如 'uʍopǝpısdn' 在 cmets 中提到的，我需要为 mozilla 包含关键帧才能在 FireFox 中工作。然而，非常令人惊讶的是，对于 IE 11，我必须包含一个没有任何浏览器前缀的关键帧元素，并且它不必位于 CSS 的顶部。

.logo-new {
    background-image: url("../logo.png");
    background-repeat: no-repeat;
    height: 95px;
    opacity: 0;
    width: 479px;
}


.animate {
    -moz-animation: fadeIn 1s ease-in;
    -o-animation: fadeIn 1s ease-in;
    -webkit-animation: fadeIn 1s ease-in;
    animation: fadeIn ease-in 1s 1;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

//IE 11 Fix for animation. Exclude browser prefix !!!!!
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

//Fix for animation to work in FireFox. Include a 'moz' prefix
@-moz-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

Answer 1

以下 CSS 有效。

• 对于 FireFox，在您的 CSS 中包含一个以“moz”为前缀的关键帧元素。

• 对于 IE 11，在您的 CSS 中的任何位置都包含一个不带前缀的关键帧元素，而不必在 CSS 的顶部。

  .logo-new {
  background-image: url("../logo.png");
  background-repeat: no-repeat;
  height: 95px;
  opacity: 0;
  width: 479px;
  }
  
  
  .animate {
  -moz-animation: fadeIn 1s ease-in;
  -webkit-animation: fadeIn 1s ease-in;
  animation: fadeIn ease-in 1s 1;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  }
  
   //IE 11 Fix for animation. Exclude browser prefix
   @keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
  }
  
  @-webkit-keyframes fadeIn {
     from {opacity: 0;}
     to {opacity: 1;}
  }
  
  //FireFox fix for animation. Inlcude 'moz' prefixed keyframes element
  @-moz-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
  }
  

更新

即使上面的 CSS 使动画在 IE 11 和 FireFox 中工作，我发现如果使用 FireFox 38.x 或 IE 11 的任何 'ms' 前缀样式，我们真的不需要任何 'moz' 前缀样式。

这意味着 IE 11 和 FireFox 38.x 不需要任何浏览器特定的动画样式，在我看来这是一个更好的解决方案。但 Google Chrome 42.x 是个例外，它确实需要以“webkit”为前缀的动画样式。所以我们可以去掉上面 CSS 中所有以 'moz' 或 'ms' 为前缀的样式，并且仍然可以在 IE 11 和 FireFox 38.x 中使用。