Gradient transitions in Opera 11.10 (CSS only)
Saturday, March 19, 2011 3:21:38 PM
css3, transitions, gradients
CSS3 gradients behave very similar as background images. That means you can't use CSS3 Transitions directly to create some "gradient animation". However, you can use CSS3 gradients together with background-color property. This is very important because when you apply CSS3 Transition on background-color and make some part of gradient transparent (so the background color (and the change of bg color) is visible) you get the "gradient animation"

Here is an example:
http://files.myopera.com/BS-Harou/files/gradient%20transitions.htmlUnfortunately, this technique is very limited. You can't change the rotation or position of the gradient. So if you need to create some more complex transition you have to use javascript.
Martin KadlecBS-Harou # Saturday, March 26, 2011 3:53:03 PM
http://www.w3.org/TR/css3-images/#interpolating-gradients
There are some restrictions like you can't create gradient from linear to radial and the number of color stops must be the same.
QuHno # Saturday, March 26, 2011 4:52:59 PM
Martin KadlecBS-Harou # Saturday, March 26, 2011 5:07:05 PM
Originally posted by QuHno:
Well, we will have to wait for Opera to implement that
btw I think I would hate color picker that would change when the mouse gets over
QuHno # Sunday, April 17, 2011 4:16:00 PM
Originally posted by BS-Harou:
That depends on the picker - OK, it is not mouseover and not with transitions but with gradients