Assume you have a list item, <li id="foo"> which you want to fade from one color to another when moused over, and that you are using jQuery. This is fairly easy:

$('li#foo').bind('mouseenter' , function(e) { 
    $(this).animate({backgroundColor: '#F00'} , 300); 
});

However, what if you wanted to get the resulting color or other style rules from a class defined in CSS without also declaring them in JavaScript? It seems there's no way to learn style information from CSS rules without having an example of the rule already in the document, which would require you to animate the <li> to the target appearance, then in the animation-finished callback, set the class which leads to redundant style declarations and can foul up your CSS at "runtime".

Sorry if this question's unclear: It doesn't occur in the context of any specific project, I'm just curious how you'd go about this. Also, I know CSS3 hypothetically includes support for such transitions but using CSS for dynamic behavior like this seems such an ugly hack.