问题描述：

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

自己的实现方法：

我目前使用的是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; } }

图片材料：