Animation 背景渐变CSS过渡

我正在学习CSS3的动画/转换，但在这段代码中，转换不起作用。。。为什么?

HTML:

<div id="test">
</div>

#test {
    background-color: #333;
    background-image: -webkit-linear-gradient(top, #333, #666);
    width: 100px;
    height: 100px;
    -webkit-transition: background 1s linear;
}

#test:hover {
    background-image: -webkit-linear-gradient(top, #666, #999);
}

---

这对我来说很有效。有几件事，只有当你想在其他浏览器中使用谷歌chrome时，它才会在谷歌chrome中使用：

编辑

很抱歉，我没有意识到那里有一个

转换

属性。在我自己做了一些谷歌搜索和尝试之后，很明显，背景渐变上的过渡是不可能的。。。然而

这里有一篇很好的文章，介绍了如何通过一点技巧让它工作

---

这对我来说很好。你用标签包装了css文件了吗

<style>
#test {
background-color: #333;
background-image: -webkit-linear-gradient(top, #333, #666);
width: 100px;
height: 100px;
-webkit-transition: background 1s linear;
}

#test:hover {
background-image: -webkit-linear-gradient(top, #666, #999);
}
</style>
<div id="test">
</div>

#试验{
背景色：#333；
背景图像：-webkit线性渐变（顶部，#333，#666）；
宽度：100px；
高度：100px；
-webkit转换：背景1s线性；
}
#测试：悬停{
背景图片：-webkit线性渐变（顶部#666#999）；
}

这对我很有效，我还可以告诉你CSS3操场，在那里你可以随时查看

渐变可以通过一点“作弊”来完成。我绝对不是css方面的专家（我是新来的，所以不要恨我太快了：D），但只要把div放在彼此的上面，一个不透明度为1，一个不透明度为0。 （每个div设置了不同的渐变）悬停时，将不透明度从1更改为0，反之亦然

设置计时功能，但是这些div被放置在彼此的z-index属性上，其余部分则执行。 （针对Safari进行了优化）也许是新手的方式，但这种方式（令人惊讶地）非常有效：

 #divgradient1
    {
     z-index:-1;
     height:100px;
     background: -webkit-linear-gradient(90deg, red, blue);
     background: -o-linear-gradient(90deg, red, blue);
     background: -moz-linear-gradient(90deg, red, blue); 
     background: linear-gradient(90deg, red, blue);

     opacity:1;
     transition:background,opacity,z-index;
     -webkit-transition:background,opacity,z-index ;
     transition-duration: 1s;
     -webkit-transition-duration: 1s;
    }

 #divgradient1:hover{
    z-index:-1;
    opacity:0;        
    transition:background,opacity,z-index;
    -webkit-transition:background,opacity,z-index;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    }


 #divgradient2:hover{
    opacity:1;
    z-index:2;
    background: -webkit-linear-gradient(-90deg, red, blue);
    background: linear-gradient(-90deg, red, blue);
    transition:background,opacity,z-index;
    -webkit-transition:background,opacity,z-index;
    transition-duration: 1s;
    -webkit-transition-duration: 1s; 
    }


 #divgradient2
    {
    z-index:1;
    opacity:0;
    height:100px;        
    background: -webkit-linear-gradient(-90deg, red, blue);
    background: linear-gradient(-90deg, red, blue);
    transition:background,opacity,z-index;
    -webkit-transition:background,opacity,z-index;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    }

不管它看起来是什么样的divs：

    <div id="divgradient1" style="position:absolute;width:100px;"></div>
    <div id="divgradient2" style="position:absolute;width:100px;"></div>

---

可能的副本-看起来你现在真的不走运？！我已经在Chrome和Safari中进行了测试，但过渡效果不起作用）：