Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webkit support for gradient transitions

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):

.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)); } 
like image 436
GZaidman Avatar asked Sep 24 '10 19:09

GZaidman


People also ask

How do you transition on Webkit?

Use the @supports (transition) feature query instead. The -webkit-transition Boolean non-standardCSS media feature is a WebKit extension whose value is true if the browsing context supports CSS transitions. Apple has a description in Safari CSS Reference; this is now called transition there.

How do you transition a gradient in CSS?

In CSS, you can't transition a background gradient. It jumps from one gradient to the other immediately, with no smooth transition between the two. He documents a clever tactic of positioning a pseudo element covering the element with a different background and transitioning the opacity of that pseudo element.

What is the use of Webkit in CSS?

The term 'webkit' is used in the CSS syntax for rendering content in Safari and Chrome browsers. Webkit code may need to be added in CSS to ensure it renders correctly on Chrome and Safari due to the lack of cross-compatibility.

What is moz transition in CSS?

The –moz-transition property, which is shorthand for a set of individual components of the transition, is a Mozilla (Gecko) vendor-specific property, supported by Firefox.


1 Answers

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/

like image 134
thegaw Avatar answered Oct 14 '22 18:10

thegaw