线性梯度的css过渡 [英] css transition with linear gradient

问题描述

我试图添加一个转换到一个按钮我有背景是用css线性梯度，但它不工作。

I'm trying to add a transition to a button I have that's background is made with css linear-gradient but it's not working.

这是css我的按钮。

a.button
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@green), color-stop(100%,#a5c956));
-webkit-transition: background 5s linear;
}

a.button:hover
{
-webkit-gradient(linear, left top, left bottom, color-stop(0%,@greenhover), color-stop(100%,#89af37))
}

想知道@green和@greenhover，我使用.less来使我的css。

If you're wondering about @green and @greenhover, I'm using .less to make my css.

这有什么问题吗？任何想法？

Anything wrong with this? Any ideas?

推荐答案

可悲的是，你现在真的不能转换渐变。

Sadly, you really can't transition gradients for now.

所以，唯一可行的解​​决方法是使用一个额外的元素与所需的渐变和过渡它的不透明度： http://jsfiddle.net / kizu / CPZv5 /

So, the only workable workaround is using an extra element with needed gradient and transition it's opacity: http://jsfiddle.net/kizu/CPZv5/

不能使用伪元素，因为只有Fx可以对伪元素进行动画转换。

An pseudo-element can't be used, 'cause only Fx can animate transitions on the pseudo-elements for the moment.

这篇关于线性梯度的css过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！