How to call CSS animation manually with Javascript?

I'm using a UIWebView with CSS animations, which animates the main body when it loads from alpha 0 to 1:

 NSString *HTML = [NSString stringWithFormat:@"<html> \n"
                      "<head> \n"
                      "<style type=\"text/css\"> \n"
                      "@-webkit-keyframes fadeIn {from {opacity: 0;-webkit-transition: opacity;}to {opacity: 1;}} \n"
                      "body {\n"
                      "-webkit-animation-name:fadeIn;\n"
                      "-webkit-animation-duration: 1.5s;\n"
                       ...

My question is, how would I call this animation manually using Javascript so that at any time, if I call the JS, the view animates from 0 to 1 (rather than just animating on load)? Or is this not possible with CSS?

Basically I want to do this:

[mainWebView stringByEvaluatingJavaScriptFromString:@"/*animate*/"];

Solution

You can do this by adding the transition to the body and adding a class later that changes the property with a transition attached via jQuery or any other library to the body at your time of choosing. A simple example of this is here:

http://jsfiddle.net/Fwteu/4/

And an example that animates the opacity from a callback to show the body:

http://jsfiddle.net/tCfb5/