User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.3a3pre) Gecko/20100312 Minefield/3.7a3pre Build Identifier: For example... div { -moz-transition:1s; background:-moz-linear-gradient(top, red, blue); div:hover { background:green; } Reproducible: Always

The transitions draft doesn't seem to support animation from colors to gradients. See http://dev.w3.org/csswg/css3-transitions/#animation-of-property-types- (in particular the "paint server" entry). How would you propose this be supported? What do you expect the transition to look like?

I would like to propose it, yes. It would have each point in the transition changing into the same colour.

There are three possible ways to animate gradients: (1) pure cross-fade (2) animate the endpoints of the gradient line, and simultaneously do a cross-fade along the line (3) animate each gradient stop from position-to-position and color-to-color (depends on having same number of stops) Animating a gradient to a color is actually relatively straightforward in all three: in (2) and (3) you'd just copy the stops from the side that's the gradient, but make all the colors animate to/from the end/start color.

The latest CSS3 Image Values draft defines gradient interpolation: http://dev.w3.org/csswg/css3-images/#interpolation However, it doesn't apply to gradient-to-color transitions. I assume regular cross-fade rules apply in that case.

I'll mark this as WONTFIX, because there's not much point in this, now. It's only going to cause confusion. I'll resolve this to reduce triage's workload.

I don't see why we'd wontfix this. Depends on what happens with the spec.

IE 10+ and Edge support gradient transitions, e.g.: .example {transition: background-image .1s ease-in-out; }

PPK test: http://www.quirksmode.org/css/transitions/properties.html Update MDN doc:https://developer.mozilla.org/en-US/docs/Web/CSS/transition$revision/1084117