从 0 到 1 不透明度的动画在 FireFox 中不起作用,但在 Chrome 中有效
Animation from 0 to 1 opacity does not work in FireFox but works in Chrome
我有以下用于 html 和 CSS 的代码来应用动画,以便徽标图像从 0 的不透明度淡化到 1。这在最新的 Chrome 浏览器中效果很好,但在最新的 FireFox 或 IE 11 中没有。
我已确保徽标图像的初始不透明度为 0 到 'logo-new' class,因此当动画发生时它从 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' 在评论中提到的,我需要包含 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;}
}
以下 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 或我们真的不需要任何 'moz' 前缀样式IE 11 的任何 'ms' 前缀样式。
这意味着 IE 11 和 FireFox 38.x 不需要任何浏览器特定的动画样式,在我看来这是一个更好的解决方案。但是 Google Chrome 42.x 是个例外,确实需要 'webkit' 前缀的动画样式。所以我们可以去掉上面 CSS 中所有以 'moz' 或 'ms' 为前缀的样式,并且仍然可以在 IE 11 和 FireFox 38.x.[=11= 中工作]
我有以下用于 html 和 CSS 的代码来应用动画,以便徽标图像从 0 的不透明度淡化到 1。这在最新的 Chrome 浏览器中效果很好,但在最新的 FireFox 或 IE 11 中没有。
我已确保徽标图像的初始不透明度为 0 到 'logo-new' class,因此当动画发生时它从 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' 在评论中提到的,我需要包含 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;}
}
以下 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 或我们真的不需要任何 'moz' 前缀样式IE 11 的任何 'ms' 前缀样式。
这意味着 IE 11 和 FireFox 38.x 不需要任何浏览器特定的动画样式,在我看来这是一个更好的解决方案。但是 Google Chrome 42.x 是个例外,确实需要 'webkit' 前缀的动画样式。所以我们可以去掉上面 CSS 中所有以 'moz' 或 'ms' 为前缀的样式,并且仍然可以在 IE 11 和 FireFox 38.x.[=11= 中工作]