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

Question

我正在尝试制作一个简单的动画，其中一个图像淡入，淡出另一个图像，并无限重复。到目前为止，它仅适用于 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);}
    }

Answer 1

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