CSS Webkit 支持渐变过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3790273/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webkit support for gradient transitions
提问by GZaidman
Im wondering if anyone know when will webkit support transitions of gradients?
for example, the following code doesnt work in Chrome 6 (assuming grad-transition is a link):
我想知道是否有人知道 webkit 什么时候支持渐变转换？
例如，以下代码在 Chrome 6 中不起作用（假设 grad-transition 是一个链接）：
.grad-transition {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(black));
-webkit-transition: background-image .5s;
}
.grad-transition:hover {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white));
}
回答by thegaw
Trying to do the same thing.
试图做同样的事情。
As of right now I do not think it is possible to animate a gradient.
截至目前，我认为无法为渐变设置动画。
I'm using a workaround. Instead of animating the gradient, I'm using a semi-transparent gradient for the background-image and then animating the background color.
我正在使用一种解决方法。我没有对渐变进行动画处理，而是对背景图像使用半透明渐变，然后对背景颜色进行动画处理。
#button
{
background-color: #dbdbdb;
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, rgba(255, 255, 255, 0.9)),
color-stop(100%, rgba(0, 0, 0, 0.6))
);
}
#button:hover
{
background-color: #353535;
}
I also put up some examples here: http://tylergaw.com/www/lab/css-gradient-transition-sorta/
我还在这里举了一些例子：http: //tylergaw.com/www/lab/css-gradient-transition-sorta/
回答by Alan
You can also use background-position to give the illusion that the gradient is changing, when in actual fact it's simply being moved: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
您还可以使用 background-position 来产生渐变正在变化的错觉，而实际上它只是被移动了：http: //sapphion.com/2011/10/css3-gradient-transition-with-background-position/
回答by Chris Visser
It is possible to make a transition on gradients using a little hack:
可以使用一个小技巧在渐变上进行过渡：
The below code will set transparancy to 0.3 on the darkest color. The hover will set this color to another color. Since the transparancy can be transitioned it will generate the same effect.
下面的代码会将最深颜色的透明度设置为 0.3。悬停会将此颜色设置为另一种颜色。由于透明度可以转换，它将产生相同的效果。
I also added the not transitional version for mozilla and IE.
我还为 mozilla 和 IE 添加了非过渡版本。
.menu li a {
background-color: #ffffff;
background: -webkit-gradient(linear, left top, right top, from(#eeeeee), to(rgba(238, 238, 238,0.3)));
background: linear-gradient(left,#eeeeee, #ffffff);
background: -moz-linear-gradient(180deg, #eeeeee, #ffffff);
}
.menu li a:hover {
background-color: #006613;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
background: linear-gradient(left, #006613, #eeeeee);
background: -moz-linear-gradient(180deg, #006613, #eeeeee);
}
回答by android.nick
I asked this question awhile ago, you can see the responses I got by searching through my questions asked. They told me that you can't yet do this properly, but you can do it by setting the gradients on two different divs, then fading one div on top of the other to create the effect.
我前段时间问过这个问题，你可以通过搜索我提出的问题来看到我得到的答复。他们告诉我你还不能正确地做到这一点，但你可以通过在两个不同的 div 上设置渐变来做到这一点，然后在另一个 div 上淡入淡出以创建效果。
回答by Рыбалов Павел
I'm working on JS lib which makes a transition for gradients possible: It already can be used for linear gradients. Usage:
我正在研究 JS lib，它使渐变的过渡成为可能：它已经可以用于线性渐变。用法：
var button = $('#button');
var targetGradientString = 'linear-gradient(rgb(247, 91, 52) 0%, rgb(240, 233, 93) 25%, rgb(43, 245, 12) 50%, rgb(24, 85, 240) 75%, rgb(166, 39, 230) 100%)';
var targetElement = $('#target');
button.click( function() {
targetElement.gradientTransition(targetGradientString, 1500, 60);
});
