0到1不透明度的动画在FireFox中不起作用,但在Chrome中有效

时间:2015-05-19 23:24:18

标签: css3 css-animations

我有以下代码用于html和CSS以应用动画,以便徽标图像从0到1的不透明度淡化。这在最新的Chrome浏览器中非常有效,但在最新的FireFox或IE 11中没有。

我已确保徽标图片的初始不透明度为0到'logo-new'类,因此当动画发生时,它从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;}
}

1 个答案:

答案 0 :(得分:0)

以下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不需要任何特定于浏览器的动画样式,这在我看来是更好的解决方案。但谷歌Chrome 42.x是一个例外,需要'webkit'前缀动画样式。因此,我们可以取消上面CSS中以'moz'或'ms'为前缀的所有样式,并且仍然可以在IE 11和FireFox 38.x中使用它。