CSS3 动画在 Firefox 或 Internet Explorer 中不起作用答案

【问题标题】：CSS3 Animation Not Working in Firefox or Internet ExplorerCSS3 动画在 Firefox 或 Internet Explorer 中不起作用
【发布时间】：2015-11-05 10:34:35
【问题描述】：

我正在尝试制作一个简单的动画，其中一个图像淡入，淡出到另一个，并无限重复。到目前为止，它仅适用于 Chrome 和 Safari，但不适用于 Firefox 或 Internet Explorer。这是我的 CSS 代码：

    header #slider{
        background:url(images/slider/128bridge.jpg);
        background-repeat:no-repeat;

        -webkit-animation-name:headerAnimation;
        -webkit-animation-duration:40s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:linear;

        -moz-animation-name:headerAnimation;
        -moz-animation-duration:40s;
        -moz-animation-iteration-count:infinite;
        -moz-animation-timing-function:linear;

        -ms-animation-name:headerAnimation;
        -ms-animation-duration:40s;
        -ms-animation-iteration-count:infinite;
        -ms-animation-timing-function:linear;

        -o-animation-name:headerAnimation;
        -o-animation-duration:40s;
        -o-animation-iteration-count:infinite;
        -o-animation-timing-function:linear;

        animation-name:headerAnimation;
        animation-duration:40s;
        animation-iteration-count:infinite;
        animation-timing-function:linear;
    }

    @-webkit-keyframes headerAnimation{
            0%      {background-image:url(images/slider/128bridge.jpg);}
            20%     {background-image:url(images/slider/128bridge.jpg);}
            25%     {background-image:url(images/slider/Caboose.jpg);}
            45%     {background-image:url(images/slider/Caboose.jpg);}
            50%     {background-image:url(images/slider/CivilWarReenactment_250W.jpg)}
            70%     {background-image:url(images/slider/CivilWarReenactment_250W.jpg)}
            75%     {background-image:url(images/slider/Drover_250W.jpg);}
            95%     {background-image:url(images/slider/Drover_250W.jpg);}
            100%    {background-image:url(images/slider/128bridge.jpg);}
        }

        @-moz-keyframes headerAnimation{
            0%      {background-image:url(images/slider/128bridge.jpg);}
            20%     {background-image:url(images/slider/128bridge.jpg);}
            25%     {background-image:url(images/slider/Caboose.jpg);}
            45%     {background-image:url(images/slider/Caboose.jpg);}
            50%     {background-image:url(images/slider/CivilWarReenactment_250W.jpg)}
            70%     {background-image:url(images/slider/CivilWarReenactment_250W.jpg)}
            75%     {background-image:url(images/slider/Drover_250W.jpg);}
            95%     {background-image:url(images/slider/Drover_250W.jpg);}
            100%    {background-image:url(images/slider/128bridge.jpg);}
        }

        @-ms-keyframes headerAnimation{
            0%      {background-image:url(images/slider/128bridge.jpg);}
            20%     {background-image:url(images/slider/128bridge.jpg);}
            25%     {background-image:url(images/slider/Caboose.jpg);}
            45%     {background-image:url(images/slider/Caboose.jpg);}
            50%     {background-image:url(images/slider/CivilWarReenactment_250W.jpg)}
            70%     {background-image:url(images/slider/CivilWarReenactment_250W.jpg)}
            75%     {background-image:url(images/slider/Drover_250W.jpg);}
            95%     {background-image:url(images/slider/Drover_250W.jpg);}
            100%    {background-image:url(images/slider/128bridge.jpg);}
        }

        @-o-keyframes headerAnimation{
            0%      {background-image:url(images/slider/128bridge.jpg);}
            20%     {background-image:url(images/slider/128bridge.jpg);}
            25%     {background-image:url(images/slider/Caboose.jpg);}
            45%     {background-image:url(images/slider/Caboose.jpg);}
            50%     {background-image:url(images/slider/CivilWarReenactment_250W.jpg)}
            70%     {background-image:url(images/slider/CivilWarReenactment_250W.jpg)}
            75%     {background-image:url(images/slider/Drover_250W.jpg);}
            95%     {background-image:url(images/slider/Drover_250W.jpg);}
            100%    {background-image:url(images/slider/128bridge.jpg);}
        }

        @keyframes headerAnimation{
            0%      {background-image:url(images/slider/128bridge.jpg);}
            20%     {background-image:url(images/slider/128bridge.jpg);}
            25%     {background-image:url(images/slider/Caboose.jpg);}
            45%     {background-image:url(images/slider/Caboose.jpg);}
            50%     {background-image:url(images/slider/CivilWarReenactment_250W.jpg)}
            70%     {background-image:url(images/slider/CivilWarReenactment_250W.jpg)}
            75%     {background-image:url(images/slider/Drover_250W.jpg);}
            95%     {background-image:url(images/slider/Drover_250W.jpg);}
            100%    {background-image:url(images/slider/128bridge.jpg);}
    }

【问题讨论】：

您能否提供一个使用嵌入式 StackOverflow Snippet 或最好的 JSFiddle（或将您的代码放到其他地方）的工作示例，以便我们对其进行测试？
您可以在以下网站上查看此代码的运行情况：temp.srrl-rr.com

标签： css css-animations

【解决方案1】：

来自answer

根据candidate recommendation spec（2014 年 9 月 9 日）， background-image 被定义为不可动画。

那么，Firefox 只是遵循规范，以及浏览器的行为哪个动画background-image 是非标准的，不应依赖开。

也许尝试实现这样的东西 - Simple jQuery image crossfade

【讨论】：

感谢您的反馈。该动画现在可以在所有主要的网络浏览器上运行。

【解决方案2】：

Chrome、Opera 和 Safari 原生支持background-image 转换，但在 Firefox 或 IE 中不支持。
您最好的选择是使用伪元素或<div>'s，并为不透明度设置动画。

【讨论】：

或带有动画background-position的精灵表。