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.

Answer 1

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.