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

这对我来说是应该的。有几件事，如果你想让它在其他浏览器中工作，这只会在google chrome中工作:

这是一个生成器

这是一个解释

编辑

对不起，我没有意识到这里有一个transition属性。在我自己做了一些谷歌搜索和尝试了一些东西之后，很明显背景渐变的过渡是不可能的……然而。

这里有一篇很好的文章，教你如何用一点技巧让它工作

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游乐场

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

和div:

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