Javascript 慢慢改变图像上的颜色

大家好我有点小问题， 在我开始之前，我必须说我的英语不好，对不起。 我制作了一个包含2张图片的表格，当有人在图片上悬停时，颜色将根据不透明度顺序发生变化（静止图片可见），我使用以下代码完成：

span.rollover {
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition: -webkit-transform 1s;
    background: url(images/moreProcuts.png) center center no-repeat #9b1b24;
    cursor: pointer;
    height: 170px;
    width: 250px;
    position: absolute;
    z-index: 10;
    opacity: 0;
    filter: alpha(opacity=0);
}
span.rollover:hover {
    opacity: .6;
    filter: alpha(opacity=60);
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition: -webkit-transform 1s;
    -webkit-box-shadow: 0px 0px 4px #000;
    -moz-box-shadow: 0px 0px 4px #000;
    box-shadow: 0px 0px 4px #000;
}

但是现在我想慢慢地改变图片的颜色，有没有办法用javascript或css来做到这一点？。 谢谢

我的作品中有一个链接来展示它的效果：

---

您可以添加CSS转换：

span.rollover {
      opacity: 0;
      transition: opacity 1s ease-in-out;
}

span.rollover:hover {
      opacity: 0.6;
      transition: opacity 1s ease-in-out;
}

---

您可以将

-webkit

前缀添加到iOS兼容性中。

多亏了@lonDen，我将我的更改为：

<style>
span.rollover
{
-webkit-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995);
-moz-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995);
-o-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995);
transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995); /* custom */
-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995);
-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995);
-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995);
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995); /* custom */
background: url(images/moreProcuts.png) center center no-repeat #9b1b24;
cursor: pointer;
height: 170px;
width: 250px;
position: absolute;
z-index: 10;
opacity: 0;
filter: alpha(opacity=0);
}
span.rollover:hover
{
opacity: .6;
filter: alpha(opacity=60);
-webkit-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995);
-moz-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995);
-o-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995);
transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 0.995); /* custom */
-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995);
-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995);
-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995);
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 0.995); /* custom */
-webkit-box-shadow: 0px 0px 4px #000;
-moz-box-shadow: 0px 0px 4px #000;
box-shadow: 0px 0px 4px #000;} <style/>

跨距翻转
{
-webkit转换：所有1000ms立方贝塞尔（1.000,0.000,0.000,0.995）；
-moz转换：所有1000ms立方贝塞尔（1.000,0.000,0.000,0.995）；
-o型过渡：所有1000ms立方贝塞尔（1.000,0.000,0.000,0.995）；
过渡：所有1000ms立方贝塞尔（1.000,0.000,0.000,0.995）；/*定制*/
-webkit过渡计时功能：立方贝塞尔（1.000,0.000,0.000,0.995）；
-moz过渡计时功能：立方贝塞尔（1.000,0.000,0.000,0.995）；
-o-过渡-定时-功能：立方贝塞尔（1.000,0.000,0.000,0.995）；
过渡计时功能：立方贝塞尔（1.000,0.000,0.000,0.995）；/*自定义*/
背景：url（images/moreProcuts.png）中心不重复#9b1b24；
光标：指针；
高度：170px；
宽度：250px；
位置：绝对位置；
z指数：10；
不透明度：0；
过滤器：alpha（不透明度=0）；
}
滚动：悬停
{
不透明度：.6；
过滤器：α（不透明度=60）；
-webkit转换：所有1000ms立方贝塞尔（1.000,0.000,0.000,0.995）；
-moz转换：所有1000ms立方贝塞尔（1.000,0.000,0.000,0.995）；
-o型过渡：所有1000ms立方贝塞尔（1.000,0.000,0.000,0.995）；
过渡：所有1000ms立方贝塞尔（1.000,0.000,0.000,0.995）；/*定制*/
-webkit过渡计时功能：立方贝塞尔（1.000,0.000,0.000,0.995）；
-moz过渡计时功能：立方贝塞尔（1.000,0.000,0.000,0.995）；
-o-过渡-定时-功能：立方贝塞尔（1.000,0.000,0.000,0.995）；
过渡计时功能：立方贝塞尔（1.000,0.000,0.000,0.995）；/*自定义*/
-网络工具包盒阴影：0px 0px 4px#000；
-moz盒阴影：0px 0px 4px#000；
盒影：0px 0px 4px#000；}

---

而且它工作得非常好

您是否也可以显示您正在使用的相关HTML？理想情况下，使用一些图像（可在互联网上获得）来显示代码“工作”？-使用此构造函数创建动画。慢到你想要的程度。@lonDen感谢真正有效的人，这很有帮助：）