animation - 具有背景渐变的 CSS 过渡

Question

我正在学习 CSS3 的动画/过渡，但在此代码中过渡不起作用...为什么？

HTML:

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

CSS:

#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);
}

http://jsfiddle.net/LLRfN/

Answer 1

这对我有用，因为它应该是预期的。有几件事，如果你想让它在其他浏览器中工作，这只会在谷歌浏览器中工作:

Here is a generator

Here is an explanation

编辑

抱歉，我没有意识到那里有一个 transition 属性。在进行了一些谷歌搜索并自己尝试了一些东西之后，很明显背景渐变的过渡是不可能的......但是。

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

http://nimbupani.com/some-css-transition-hacks.html