Open Bug 552087 Opened 10 years ago Updated 3 years ago

There is no CSS transition between CSS background gradients and colours


(Core :: CSS Parsing and Computation, defect)

Windows 7
Not set





(Reporter: josh.tumath+bugzilla, Unassigned)


(Blocks 1 open bug)


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
Version: unspecified → Trunk
The transitions draft doesn't seem to support animation from colors to gradients.  See (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:

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.
Closed: 9 years ago
Resolution: --- → WONTFIX
I don't see why we'd wontfix this.  Depends on what happens with the spec.
Ever confirmed: true
Resolution: WONTFIX → ---
IE 10+ and Edge support gradient transitions, e.g.:

    .example {transition: background-image .1s ease-in-out; }
You need to log in before you can comment on or make changes to this bug.