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 — mddw, May 27 '12 at 22:08
The same exact question has already been asked here : http://stackoverflow.com/questions/3328933/set-the-webkit-keyframes-from-to-parameter-with-javascript — Denis, May 27 '12 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, May 27 '12 at 22:12
@Denis The question you mentioned handles keyframes but not css3 transformations. Please consider. — Katti, May 27 '12 at 22:14

Oleg · Accepted Answer · 2012-05-27T23:00:33.497

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, May 27 '12 at 22:52
@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) — Oleg, May 27 '12 at 23:02

score -1 · Answer 2 · answered May 27 '12 at 21:59

-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 '12 at 21:59

Vivek Chandra

4,240
9
33
38

1

Yeah animation only. But for a reason I wanna do it using keyframes only. Though solution is available with jQuery animate. – Katti May 27 '12 at 22:01
1

Please use proper English (not "u" instead of "you" etc.) in your answer and do not just link to an external resource. – ThiefMaster May 27 '12 at 22:17

CSS3 Transformations using Javascript

2 Answers2

Update: