0

Possible Duplicate:
CSS3 animation with gradients

I have an element with a radial gradient, code as follows:

background: radial-gradient(center, ellipse cover,  rgba(255,255,255,0.65) 0%,rgba(255,255,255,0) 100%);

I want to make a transition from invisible to visible, which I believe would be accomplished by changing alpha value of the first rgba value. I just don't know how the syntax should look like. Or is this even possible in CSS3?

Community
  • 1
  • 1
Teemu Pärssinen
  • 11
  • 2

1 Answers1

0

Gradient colors are not yet animatable/transitionable in any browser although the spec says they should be.

To get this effect, you need to add a separate "opacity" property that transitions from 0 to 1.

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • Thank you for your answer :-) I put the gradient in :before pseudo-element and then changing the opacity of it as you said. It's working in FireFox but didn't get it working in Chrome for some reason. Don't know if that's because of it is a pseudo-element or what -- but that's a whole another question and I will have to take a look at that when I have time. – Teemu Pärssinen Feb 20 '12 at 08:39
  • There are a whole bunch of bugs with pseudo elements. There seems to be a bunch of CSS effects don't work properly with them. I would suggest putting the transition on the parent element rather than directly on the pseudo element (or wrap the pseudo element in a div or span and transition that) – Michael Mullany Feb 20 '12 at 17:35
  • Thanks for advice, I'm going to try that. – Teemu Pärssinen Feb 21 '12 at 11:41