CSS3 Transformations using Javascript

Question

I wanna handle the css3 transformations using keyframes with javascript. This is a Question I've never got an answer that is favorable anywhere. If the example is

@-webkit-keyframes move{
    from{
        -webkit-transform:translate(0px,0px);
    }
    to{
        -webkit-transform:translate(0px,-100px);
    }
}

How can I give those values of translate dynamically using javascript.

As far as I know, if you stick to CSS3 animation, you'll have to insert generated rule for keyframes as a <style> in your html. Ugly. — mddw
– mddw, Commented May 27, 2012 at 22:08
The same exact question has already been asked here : stackoverflow.com/questions/3328933/… — Denis
– Denis, Commented May 27, 2012 at 22:11
I am having some objects like smoke. And I wanna assign random() numbers to translate them randomly all over the page. And also need to scale and rotate the objects randomly. That's the reason I wanna handle the transformation with javascript. — Katti
– Katti, Commented May 27, 2012 at 22:12
@Denis The question you mentioned handles keyframes but not css3 transformations. Please consider. — Katti
– Katti, Commented May 27, 2012 at 22:14

Oleg · Accepted Answer · 2012-05-27 23:00:33Z

The scenario is slightly complicated with you not being able to explicitly assign an undeclared animation even in css; i.e. in your sample you're declaring a "move" animation.

That being said, you're able to generate stylesheets at runtime - the following CSS rules would be fairly trivial to generate:

@-webkit-keyframes moveA{/*keyframes*/}
#smokeA {-webkit-animation: moveA 5s infinite; }
@-webkit-keyframes moveB{/*keyframes*/}
#smokeB {-webkit-animation: moveB 5s infinite; }
...

And could then be appended to to document's head like so:

$('head').append('<style type="text/css">/*css rules here*/</style>');

Proof of concept (with rather horrible styles being added 5 seconds into the page load)

NB: I've noticed that with GPU acceleration enabled, the FPS counter gets triggered on my Chrome. That leads me to speculate this is may be in fact a better performing approach, compared to jQuery animation.

Update:

Seing Katti's comment re intending to change the style values every few seconds - I'd rather you not. You could very well get away with generating only a fixed subset of animations; imo the Cicada Principle would be highly applicable in this scenario - just think of movement rather than graphical patterns when reading the article. A truly random animation would not look realistic unless applied to an extremely large amount of small particles (which would likely kill the browser) - meaning that animating pre-rendered sprites would be the way to go.

Thanks for the reply. I hope you read my comment. With this I would be appending tons of styles. As I would like to change the style values every few seconds.
@Katti: I've updated my answer to elaborate on why recycling a subset of animation patterns would be the most appropriate solution - especially if you're going for the effect only (as opposed to a simulation of a smoke particle system)

Vivek Chandra · Accepted Answer · 2012-05-27 21:59:10Z

-1

I'm guessing u need to animate some elements using javascript.. as in increasing the height|width.. this should be a good place to start..

Tutorial

answered May 27, 2012 at 21:59

Vivek Chandra

4,3569 gold badges36 silver badges39 bronze badges

2 Comments

Katti Over a year ago

Yeah animation only. But for a reason I wanna do it using keyframes only. Though solution is available with jQuery animate.

ThiefMaster Over a year ago

Please use proper English (not "u" instead of "you" etc.) in your answer and do not just link to an external resource.

Collectives™ on Stack Overflow

CSS3 Transformations using Javascript

2 Answers 2

Update:

3 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update:

3 Comments

2 Comments

Linked

Related