问题描述：

想利用图片做一个类似灯光渐变的效果：
现阶段有不同颜色的图片（如下图），然后更改他们的透明度实现渐变效果。

自己的实现方法：

我目前使用的是CSS3的动画，更改background-image和opacity来实现的。但是IE和火狐并不支持background-image属性的动画效果（其实只有chrome支持）。
因为需要渐变效果，也就是在yellow->red的时候，会有橙色的过度（该效果是通过两张图片的叠加实现的。也就是（
yellow 1 1->1 1->0
red 0 0->1 1->1
）
这是一个从yellow->red的过程。
求各位大神给的思路或者想法？
实现代码如下：

/* for Chrome*/
#colorBar{
    position: absolute;
    /*float: left;*/
    z-index: 15;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    opacity: 1;
    animation: colorImg 8s steps(40) infinite ;
    /*animation: colorImg 15s infinite;*/
}

@keyframes colorImg{
    0%{
        background-image: url("../img/LED/yellow.png");
        opacity:1;
    }
    25%{
        background-image: url("../img/LED/red.png");
        opacity:1;
    }
    50%{
        background-image: url("../img/LED/green.png");
        opacity:1;
    }
    75%{
        background-image: url("../img/LED/blue.png");
        opacity:1;
    }
    100%{
        background-image: url("../img/LED/yellow.png");
        opacity:1;
    }

}

图片材料：