与背景渐变

Question

CSS转换我正在学习有关使用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属性。在做了一些Google搜索之后，我自己尝试了一些东西，很明显，背景渐变上的过渡是不可能的。

这里是如何得到它与一个黑客

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

Answer 2

其对我工作的罚款一点点工作的好文章。你用标签包装了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> 

Answer 3

它的工作对我来说，我还可以指向你的CSS3操场在那里你可以检查它的飞行

CSS3 Playground

Answer 4

渐变过渡可以“欺骗”的点点所做。我绝对不是在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; 
    } 

和任何-IT-应该-看样的div：

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

[为Webkit的支持