I tried the wrap my head around this and had much the same issue. This guy had some solid posts:
http://screenflicker.com/mike/code/transition-gradient/
and
http://virb.com/stickel/posts/text/816726
Essentially, if you set the background, i.e.:
#stage div#cta {
padding: 7px;
background: -webkit-gradient(linear, left top, left bottom, to(rgba(0,0,255,1)), from(rgba(255,0,0,1)), color-stop(0.5,rgba(50,50,255,.1)));
-webkit-transition: all 1.0s ease-in-out;
}
Then apply a class to transition it, it will ONLY change the background-color property (and you'll only see this if you have a color-stop that's transparent)
#stage.play div#cta
{
background: -webkit-gradient(linear, left top, left bottom, to(rgba(0,255,0,1)), from(rgba(0,0,255,1)), color-stop(0.5,rgba(50,50,255,.1)));
}