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 function that would append the CSS content in the head, or use a Javascript framework (like jQuery). — Zakaria
– Zakaria, Commented Jul 8, 2012 at 22:01

Justin Summerlin · Accepted Answer · 2012-07-08 22:16:46Z

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 8, 2012 at 22:16

answered Jul 8, 2012 at 22:08

Justin Summerlin

5,1361 gold badge18 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Snowman Over a year ago

I tried putting opacity: 0 in white, but then it doesn't animate anymore. Why's that?

Justin Summerlin Over a year ago

Because you haven't set a transition on opacity. See the second example there.

Snowman Over a year ago

Now how would I add this with a Javascript string?

Anthony Mills · Accepted Answer · 2012-07-08 22:02:36Z

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 8, 2012 at 22:02

Anthony Mills

8,7864 gold badges36 silver badges52 bronze badges

2 Comments

Snowman Over a year ago

I'm doing this, but nothing is happening: [mainWebView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"main\").style.opacity = 1"];

Snowman Over a year ago

Ok I'm using document.body.style.opacity = 1.0, it works, but it doesn't animate..

Collectives™ on Stack Overflow

How to call CSS animation manually with Javascript?

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related