CSS3 transition strangeness when using background-color:transparent;

Hi All,

I’m wanting to use transitions on link states. I have a
background-color set on links, then background-color:transparent; set
for a:hover.

I expected the background color to fade to transparent, the same way
opacity would, or the way it would if you were transitioning directly
to the parent’s background color. However in Webkit the transition
goes via a mid-gray. In Opera 10.50 it goes via gray on hover, then
via red (!) on mouse-out.

Here’s a demo page:
http://oli-studio.com/bugs/browser/transition-transparent.html

I can’t see anything in CSS3 Transitions that addresses transparency
specifically, just this note under “6. Animation of property types”:

“color: interpolated via red, green, blue and alpha components
(treating each as a number, see below)”

Is this by design?

peace - oli

Received on Friday, 29 January 2010 08:40:29 UTC