Open Bug 552087 Opened 10 years ago Updated 3 years ago

There is no CSS transition between CSS background gradients and colours

Categories

(Core :: CSS Parsing and Computation, defect)

x86
Windows 7
defect
Not set

Tracking

()

REOPENED

People

(Reporter: josh.tumath+bugzilla, Unassigned)

References

(Blocks 1 open bug)

Details

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 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.
Status: UNCONFIRMED → RESOLVED
Closed: 9 years ago
Resolution: --- → WONTFIX
I don't see why we'd wontfix this.  Depends on what happens with the spec.
Status: RESOLVED → REOPENED
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.