How to call CSS animation manually with Javascript?

Question

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*/"];

I think that your problem is more a "how can I call CSS in Javascript"'s problem. IMHO, I would either [add the CSS with a Javascript](http://stackoverflow.com/questions/3922139/add-css-to-head-with-javascript) function that would append the CSS content in the head, or use a Javascript framework (like jQuery). — Zakaria, Jul 08 '12 at 22:01

Justin Summerlin · Accepted Answer · 2012-07-08T22:16:46.947

1

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/

edited Jul 08 '12 at 22:16

answered Jul 08 '12 at 22:08

Justin Summerlin

4,938
1
16
10

I tried putting opacity: 0 in `white`, but then it doesn't animate anymore. Why's that? – Snowman Jul 08 '12 at 22:11
Because you haven't set a transition on opacity. See the second example there. – Justin Summerlin Jul 08 '12 at 22:17
Now how would I add this with a Javascript string? – Snowman Jul 08 '12 at 22:18

score 0 · Answer 2 · answered Jul 08 '12 at 22:02

0

You would just set opacity: 0 in the normal CSS (through class or whatever) and then set domObject.style.opacity = 1 in the JavaScript you run on load. Animation happens any time the property changes, so you just have to change the property when you want the animation to happen.

answered Jul 08 '12 at 22:02

Anthony Mills

8,676
4
32
51

I'm doing this, but nothing is happening: `[mainWebView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"main\").style.opacity = 1"];` – Snowman Jul 08 '12 at 22:09
Ok I'm using document.body.style.opacity = 1.0, it works, but it doesn't animate.. – Snowman Jul 08 '12 at 22:26

How to call CSS animation manually with Javascript?

2 Answers2