Last Comment Bug 536540 - support animation of CSS gradient values in nsStyleAnimation
: support animation of CSS gradient values in nsStyleAnimation
Status: NEW
: dev-doc-needed
Product: Core
Classification: Components
Component: CSS Parsing and Computation (show other bugs)
: Trunk
: All All
-- normal with 18 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Jet Villegas (:jet)
Depends on:
Blocks: css-transitions 589920 594151
  Show dependency treegraph
Reported: 2009-12-23 04:56 PST by David Baron :dbaron: ⌚️UTC-8
Modified: 2016-07-23 13:03 PDT (History)
26 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

Test-case.html (1.01 KB, text/html)
2016-05-23 00:58 PDT, percyley
no flags Details
IE10.gif (217.40 KB, image/gif)
2016-05-23 00:59 PDT, percyley
no flags Details
Chrome&Safari.gif (1.55 MB, image/gif)
2016-05-23 01:00 PDT, percyley
no flags Details

Description User image David Baron :dbaron: ⌚️UTC-8 2009-12-23 04:56:42 PST
We should support animation of CSS gradient values (i.e., -moz-linear-gradient, -moz-radial-gradient) in nsStyleAnimation.

There's still some open debate on how animation of gradients should work.

(I don't have work in progress on this, but I'm trying to get bugs filed on animation/transition work that should happen for 3.7.)
Comment 1 User image David Baron :dbaron: ⌚️UTC-8 2009-12-23 04:58:08 PST
See also bug 536541 on SVG gradients.
Comment 2 User image Lea Verou 2011-03-21 05:16:00 PDT
Gradient interpolation is now defined by the spec:
Comment 3 User image Christian Fischer 2012-01-07 13:56:18 PST
/me want to help.

But i do not know where to start.

I need to animate the -moz-radial-gradient.
Comment 4 User image percyley 2016-05-23 00:58:33 PDT
Created attachment 8755319 [details]
Comment 5 User image percyley 2016-05-23 00:59:25 PDT
Created attachment 8755320 [details]
Comment 6 User image percyley 2016-05-23 01:00:13 PDT
Created attachment 8755321 [details]
Comment 7 User image percyley 2016-05-23 01:08:53 PDT
In this test case[1]:

* IE10 has supported gradient animation.
* Chrome and Safari has supported image animation(Like cross-fade()[1]).
* Firefox at least should do a simple transition(direct display of different images), rather than nothing.

Related animation how to calculate the spec here[2], The current spec is already CR.


Note You need to log in before you can comment on or make changes to this bug.