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)); }
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.
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.
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.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With