为什么按钮没有显示任何淡入淡出效果？

Question

我正在尝试编写一个按钮，在悬停时，将产生一个缓入-出效果。我使用了以下代码：

#quotebutton {
padding:20px;
margin-top:-55px;
/* fallback/image non-cover color */
background-color: #000;
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#333));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #000, #333); 
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #000, #333);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #000, #333);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #000, #333);
font-size:18px;
color:#fff;
float:right;
transition: background 300ms ease-in-out;
-webkit-transition: background 300ms ease-in-out;
-moz-transition: background 300ms ease-in-out;
}

#quotebutton:hover {
/* fallback image non-cover color */
   background-color: #000;
   /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #333, #000); 
   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #333, #000);
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #333, #000);
   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #333, #000);
}
#quotebutton a {
    text-decoration:none;
    color:#fff;
}

HTML如下：

<div id="quotebutton">
<a href="">Download Now</a>
</div>

但该按钮不会显示悬停效果。可能的问题是什么？

Answer 1

不幸的是，简短的答案是，您不能使用CSS3过渡设置背景渐变的动画。有几种方法可以使用替代技术来实现相同的目标：

1. 使用jQuery在悬停时为两个不同背景图像之间的过渡设置动画。您可以通过使用绝对定位将三个元素堆叠在彼此的顶部来最容易地实现这一点，其中底部两个是背景图像，顶部包含内容，在本例中是按钮文本。悬停时，淡出顶部的背景图像以平滑地显示底部的背景图像。请参阅this tutorial for making a background animation on hover with jQuery.
2. Use a半透明渐变背景和webkit过渡以创建部分动画。CSS3过渡可以轻松地为背景色CSS属性设置动画效果，该属性仅在不存在或透明的背景图像或渐变中可见。请参阅this example for an idea of how you might implement this.

在两个选项中，(1)更灵活，但工作量更大，需要配套脚本，而(2)灵活性较低，跨浏览器兼容性较差。

Answer 2

就像Ryan提到的，你不能动画背景渐变。尽管如此，还是有一些jQuery插件可以帮助你做到这一点。

试试jQuery Blend

我的另一个想法是，在纯色之上应用一个线性透明渐变图像。然后，可以使用过渡设置纯色的动画。顶部的透明渐变图像会让它看起来像一个渐变动画。

希望能有所帮助。干杯。